1

我有一个包含 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 的演示。

4

5 回答 5

2

.each()在这里似乎没有用，因为它通常用于迭代一组 jQuery 选择的元素。一个简单的循环就可以了：

$('#btnAdd').click(function () {
    var n = parseInt($('#HowManyRows').val(), 10);
    var original = $('#FirstRow');
    for (var i = 0; i < n; i++) {
        original.clone().appendTo('#MainTable');
    }
});
于 2012-05-07T17:10:35.047 回答
2

根据 jQuery 文档，不建议在这种情况下使用其他人建议的 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。

于 2012-05-07T18:24:37.840 回答
1

干得好：

 $(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/

于 2012-05-07T17:09:56.917 回答
0

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

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

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

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

var howMany = parseInt($('#HowManyRows').val(), 10);
while (howMany-- > 0) {
    // Add a row...
}
于 2012-05-07T17:10:47.930 回答
0 
$(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');
        }
    });   
});
于 2012-05-07T17:15:59.513 回答