Question

我有一个包含5列的HTML表格。在HTML表格上方，有一个名为“HowManyRows”的文本框，用户可以在其中输入要添加到表中的行数。实际上在“添加行”时添加了行！单击按钮。

我认为创建此功能的最佳方法是使用for循环，但在浏览互联网后，人们已经说过使用jQuery方法.each。我已经尝试过了，但它没有按照预期的那样工作。它只是在表中添加了一行，而不管“HowManyRows”中的数字。有人可以纠正我出错的地方吗？

这是我的HTML：

    <input type="text" id="HowManyRows"/>
    <table id="MainTable">
        <tr id="FirstRow">
            <td>
            <select>
              <option>Milk</option>
              <option>Coffee</option>
              <option>Tea</option>
            </select>
            </td>
             <td>
            <select>
              <option>1 sugar</option>
              <option>2 sugar</option>
              <option>3 sugar</option>
           </select>
            </td>
             <td>
                 <input type="text"/>           
            </td>   
               <td>
                 <input type="text"/>           
            </td>
               <td>
                 <input type="text"/>           
            </td>
        </tr>  
    </table>
<button type="button" id="btnAdd">Add Row!</button>

这是我的jQuery：

$(document).ready(function () {
    $('#btnAdd').click(function () {
        $('#HowManyRows').each(function(index) {
            $('#FirstRow').clone().appendTo('#MainTable');
        });
    });   
});

我在JSFiddle上创建了一个演示here。

Answer 1

.each()在这里似乎没用，因为它通常用于迭代jQuery选择元素的集合。一个simple loop would work：

$('#btnAdd').click(function () {
    var n = parseInt($('#HowManyRows').val(), 10);
    var original = $('#FirstRow');
    for (var i = 0; i < n; i++) {
        original.clone().appendTo('#MainTable');
    }
});

Answer 2

根据jQuery docs，建议不要像其他人所建议的那样使用jQuery .clone（）方法：

使用.clone（）具有生成元素的副作用重复的id属性，应该是唯一的。哪里可能，建议避免使用此方法克隆元素或者使用类属性作为标识符。

更不用说循环通过.appendTo（）调用的建议方法将导致客户端重新呈现每次迭代。我建议如下：

创建一个作为行模板的常量：

var row = ['<tr id="',
           '', // Insert id value here
           '"><td><select><option>Milk</option<option>Coffee</option<option>Tea</option></select></td><td><select><option>1 sugar</option><option>2 sugar</option><option>3 sugar</option></select></td><td><input type="text"/></td><td><input type="text"/></td><td><input type="text"/></td></tr>'];

或者，您可以省略行变量中的id，并且如果每行不需要唯一ID，则只有一个大字符串。然后继续：

$('#btnAdd').click(function () {
    var i = parseInt($('#HowManyRows').val(), 10);
    var cnt = i;
    var rowCnt = $('#MainTable').children().length;
    var rows = [];
    while(i--) {
        row[1] = 'row' + (rowCnt + cnt - i);
        rows.push(row.join()); // or just row if not using the id
    }
    $('#MainTable').append(rows.join());
}

这样我们只对DOM进行一次性添加，并且row变量中的空字符串元素将替换为唯一且可预测的id。

Answer 3

你走了：

 $(document).ready(function () {
     $('#btnAdd').click(function () {
            var count = parseInt($('#HowManyRows').val()), first_row = $('#FirstRow');
            while(count-- > 0)
                first_row.clone().appendTo('#MainTable');
     });   
 });

小提琴：http://jsfiddle.net/iambriansreed/QWpdr/

Answer 4

each遍历调用它的jQuery对象中的元素，所以这个：

$('#HowManyRows').each(...);

只执行一次迭代，因为$('#HowManyRows')只有一个元素。

在你的情况下，循环是完全可以接受的。

var howMany = parseInt($('#HowManyRows').val(), 10);
while (howMany-- > 0) {
    // Add a row...
}

Answer 5

$(document).ready(function () {
    var $howMany = $('#HowManyRows'),
        $firstRow = $('#FirstRow');
    $('#btnAdd').click(function () {
        var numRows = parseInt($howMany.val(), 10) || 1; //default to 1
        for (var i = 0; i < numRows; i++){
            $firstRow.clone().appendTo('#MainTable');
        }
    });   
});

使用jQuery向表添加行

5 个答案: