文本区域值在新行中

textarea values in new line

本文关键字:新行中 区域 文本      更新时间:2023-09-26

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>Generate Budget</title>
</head>
<script type="text/javascript">
    function tableprint()
    {
        var numOfYears = Math.abs(document.getElementById('end').value - document.getElementById('start').value);
        var budget     = Math.abs(document.getElementById('budget').value);
        var i = 0;
        var tableHtml  = "";
        for (i=1; i<=numOfYears; i++)
        {
            tableHtml =  tableHtml.concat(Number(document.getElementById('start').value)+Number(i));
            tableHtml =  tableHtml.concat("Budget");
            tableHtml =  tableHtml.concat(budget/numOfYears);
            tableHtml =  tableHtml.concat("Forecast");
            tableHtml =  tableHtml.concat(Number(document.getElementById('for'+i).value));
            tableHtml =  tableHtml.concat("Actual");
            tableHtml =  tableHtml.concat(Number(document.getElementById('act'+i).value));
        }
        document.getElementById("form2").innerHTML = tableHtml;
    }
    function generateBudget()
    {
        var numOfYears = Math.abs(document.getElementById('end').value - document.getElementById('start').value);
        var budget     = Math.abs(document.getElementById('budget').value);
        var i = 0;
        if( numOfYears < 1)
        {
            numOfYears = 1;
        }
        var tableHtml  = "<table><tr>";
        tableHtml =  tableHtml.concat("<td></td>");
        for (i=1; i<=numOfYears; i++)
        {
            tableHtml =  tableHtml.concat("<td>");
            tableHtml =  tableHtml.concat(Number(document.getElementById('start').value)+Number(i));
            tableHtml =  tableHtml.concat("</td>");
        }
        tableHtml =  tableHtml.concat("</tr>");
        tableHtml =  tableHtml.concat("<tr><td>Budget</td>");
        for (i=1; i<=numOfYears; i++)
        {
            tableHtml =  tableHtml.concat("<td>");
            tableHtml =  tableHtml.concat(budget/numOfYears);
            tableHtml =  tableHtml.concat("</td>");
        }
        tableHtml =  tableHtml.concat("</tr>");
        tableHtml =  tableHtml.concat("<tr><td>Forecast</td>");
        for (i=1; i<=numOfYears; i++)
        {
            tableHtml =  tableHtml.concat("<td>");
            tableHtml =  tableHtml.concat("<input type='text' name='for" +Number(i)+"' id='for" + Number(i) + "' />");
            tableHtml =  tableHtml.concat("</td>");
        }
        tableHtml =  tableHtml.concat("</tr>");
        tableHtml =  tableHtml.concat("<tr><td>Actual</td>");
        for (i=1; i<=numOfYears; i++)
        {
            tableHtml =  tableHtml.concat("<td>");
            tableHtml =  tableHtml.concat("<input type='text' name='act" +Number(i)+"' id='act" + Number(i) + "' />");
            tableHtml =  tableHtml.concat("</td>");
        }
        tableHtml =  tableHtml.concat("</tr></table>");
        tableHtml =  tableHtml.concat("<center><input type='button' name='submit' id='submit' value='Submit' onClick='tableprint()' /></center>");
        document.getElementById("form").innerHTML = tableHtml;
    }
</script>
<body>
<table>
    <tr>
        <td> Start Year </td>
        <td> <input type="text" name="start" id="start" value="2015"/>
        <td> End Year </td>
        <td> <input type="text" name="end" id="end" value="2020" />
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>Budget</td>
        <td> <input type="text" name="budget" id="budget" value="5522"/>
        <td> <input type="button" name="generate" id="generate" value="Generate" onClick="generateBudget()"/></td>
    </tr>
</table>
<div id="form" name="form"></div>
        <textarea id="form2">
        </textarea>
</body>
</html>

在文本区,我得到了这样的输入:

2016Budget1104.4Forecast0Actual02017Budget1104.4Forecast0Actual02018Budget1104.4Forecast0Actual02019Budget1104.4Forecast0Actual02020Budget1104.4Forecast0Actual0

如何在文本区域获得值:

(2015:Budget(value);Forecast: (value);actual:(value));(2016:Budget(value);----so on

我只在tableprint()函数中做了修改:

            <!DOCTYPE html>
            <html>
             <head>
             <title>Generate Budget</title>
             </head>
              <script type="text/javascript">
               function tableprint()
               {
                var numOfYears = Math.abs(document.getElementById('end').value - document.getElementById('start').value);
                var budget     = Math.abs(document.getElementById('budget').value);
                var i = 0;
                var tableHtml  = "";
                for (i=1; i<=numOfYears; i++)
                    {   tableHtml =  tableHtml.concat("(");
                        tableHtml =  tableHtml.concat( Number(document.getElementById('start').value)+Number(i)+":");
                        tableHtml =  tableHtml.concat("Budget:");
                        tableHtml =  tableHtml.concat("("+budget/numOfYears+");");
                        tableHtml =  tableHtml.concat("Forecast:");
                        tableHtml =  tableHtml.concat("("+Number(document.getElementById('for'+i).value)+");");
                        tableHtml =  tableHtml.concat("Actual:");
                        tableHtml =  tableHtml.concat("("+Number(document.getElementById('act'+i).value)+"));");
                    }
                    document.getElementById("form2").innerHTML = tableHtml;
                }
               function generateBudget()
                {
                    var numOfYears = Math.abs(document.getElementById('end').value - document.getElementById('start').value);
                    var budget     = Math.abs(document.getElementById('budget').value);
                    var i = 0;
                    if( numOfYears < 1)
                        {
                        numOfYears = 1;
                        }
                    var tableHtml  = "<table><tr>";
                        tableHtml =  tableHtml.concat("<td></td>");
                    for (i=1; i<=numOfYears; i++)
                        {
                          tableHtml =  tableHtml.concat("<td>");
                          tableHtml =  tableHtml.concat(Number(document.getElementById('start').value)+Number(i));
                          tableHtml =  tableHtml.concat("</td>");
                        }
                    tableHtml =  tableHtml.concat("</tr>");
                    tableHtml =  tableHtml.concat("<tr><td>Budget</td>");
                    for (i=1; i<=numOfYears; i++)
                    {
                      tableHtml =  tableHtml.concat("<td>");
                      tableHtml =  tableHtml.concat(budget/numOfYears);
                      tableHtml =  tableHtml.concat("</td>");
                    }
                    tableHtml =  tableHtml.concat("</tr>");
                    tableHtml =  tableHtml.concat("<tr><td>Forecast</td>");
                    for (i=1; i<=numOfYears; i++)
                    {
                      tableHtml =  tableHtml.concat("<td>");
                      tableHtml =  tableHtml.concat("<input type='text' name='for" +Number(i)+"' id='for" + Number(i) + "' />");
                      tableHtml =  tableHtml.concat("</td>");
                    }
                    tableHtml =  tableHtml.concat("</tr>");
                    tableHtml =  tableHtml.concat("<tr><td>Actual</td>");
                    for (i=1; i<=numOfYears; i++)
                    {
                      tableHtml =  tableHtml.concat("<td>");
                      tableHtml =  tableHtml.concat("<input type='text' name='act" +Number(i)+"' id='act" + Number(i) + "' />");
                      tableHtml =  tableHtml.concat("</td>");
                    }
                    tableHtml =  tableHtml.concat("</tr></table>");
                    tableHtml =  tableHtml.concat("<center><input type='button' name='submit' id='submit' value='Submit' onClick='tableprint()' /></center>");
                    document.getElementById("form").innerHTML = tableHtml;

                   }
            </script>
            <body>
                <table>
                    <tr>
                        <td> Start Year </td>
                        <td> <input type="text" name="start" id="start" value="2015"/>
                        <td> End Year </td>
                        <td> <input type="text" name="end" id="end" value="2020" />
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>Budget</td>
                        <td> <input type="text" name="budget" id="budget" value="5522"/>
                        <td> <input type="button" name="generate" id="generate" value="Generate" onClick="generateBudget()"/></td>
                    </tr>
                </table>
                <div id="form" name="form"></div>
                    <textarea id="form2">
                    </textarea>
            </body>
            </html>

您将得到如下输出:

(2016:Budget:(value);Forecast:(value);Actual:(value));
(2017:Budget:(value);Forecast:(value);Actual:(value));
(2018:Budget:(value);Forecast:(value);Actual:(value));
(2019:Budget:(value);Forecast:(value);Actual:(value));
(2020:Budget:(value);Forecast:(value);Actual:(value));