javascript - 如何根据最终用户给出的数字重复一个表 n 次？

Question

我需要重复<table>一定次数（最终用户提供的数量）。如何实施？

这是表格：

External Sources of funds:<input type="text" size="10">
<table border=1>
    <tr>
        <th>Name of the external Source</th>
        <th>CFY</th>
        <th>CFYm1</th>
        <th>CFYm2</th>
    </tr>

    <tr>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
    </tr>
    <tr>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
    </tr>

    <tr>
        <td><b>Total</b></td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>    
    </tr>
</table>
</p>`

在第一行代码中，即外部资金来源，用户输入一些数字n。该表必须重复n多次。我该如何实施？

Answer 1

for循环简介：

for (var i = 0; i < 20; i++) {
    alert("Hello for the " + i + "th time");
}

Answer 2

重复该表 10 次：

var i = 0, tableCount = 10;
var html = '<table border=1>
    <tr>
        <th>Name of the external Source</th>
        <th>CFY</th>
        <th>CFYm1</th>
        <th>CFYm2</th>
    </tr>

    <tr>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
    </tr>
    <tr>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
    </tr>

    <tr>
        <td><b>Total</b></td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>
        <td> <input type="text" size="10"> </td>    
    </tr>
</table>';

for(i; i < tableCount; i++){
    $('body').append(html);
}

Answer 3

您必须event handler在文本框中添加一个。

<input type="text" size="10" onkeypress="updateTables();">

当用户在文本框中输入内容时，将调用 JavaScript 函数。在函数内部，您必须使用 aloop添加表格元素。