textarea值在新行

时间：2015-10-13 09:55:52

标签： javascript html

这是我的代码：

<!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

1 个答案:

答案 0 :(得分：-1)

我仅在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));
相关问题
最新问题