Question

我创建了一个动态向表中添加行的方法。每个表丝束包含两个文本字段（collectionText和Link）

<tr>
<td>
  <input type="text" size="30" id="txtCollectionText" name="txtCollectionText" />
</td>
 <td>
 <input type="text" size="30" id="txtLink" name="txtLink" />
 </td>
</tr>

下面是我的剧本

   function addRow() {
            var row = $('#table tbody>tr:last').clone(true).insertAfter('#table tbody>tr:last');
            var index = $("#table tbody>tr").length;
            $("td:eq(0)", row).text(index);
            $("td:eq(1) input", row).attr("name", "txtCollectionText" + index).attr("id", "txtCollectionText" + index)
            $("td:eq(2) input", row).attr("name", "txtLink" + index).attr("id", "txtLink" + index)
        }

这会将索引添加到新添加的输入中，但不会添加到现有输入中。我的要求索引应该从零开始。例如，如果我默认有2行，添加第三行将给我collectiontext4和link4，但我想从0-4开始为所有行编号...任何想法？

Answer 1

将代码绑定到document.ready事件：

$(function() {
    $('#table tr').each(function(index, element)
    {
       var e = $(element);
       e.find('td:eq(0)').text(index);
       var first = 'txtCollectionText' + index.toString();
       var second = 'txtLink' + index.toString();
       e.find('td:eq(1) input').attr({name: first, id: first});
       e.find('td:eq(2) input').attr({name: second, id: second});
    });
}

如果放在脚本标记内，则只要浏览器构建完文档，该代码就会自动执行。这就是$(function() {})符号的作用 - 它是$(document).bind('ready', function() {})的简写。

Answer 2

基于你的addRow（）函数，因此假设表实际上有3列。

$(function() {
  reindexRows();
});
function addRow() {
  $("#table tbody>tr:last").clone(true).insertAfter("#table tbody>tr:last");
  reindexRows();
}
function reindexRows() {
  $("#table tbody>tr").each(function(index, ele) {
    $("td:eq(0)", ele).text(index);

    var collection_name = "txtCollectionText"+ index.toString();
    $("td:eq(1) input").attr({name: collection_name, id: collection_name });

    var link_name = "txtLink"+ index.toString();
    $("td:eq(2) input").attr({name: link_name, id: link_name });
  });
}

在jquery中循环并设置名称和id

2 个答案: