jQuery动态识别

Question

我正试图为表行得到一个直接的id数字。

例如，如果您有一个5行的表，那么行if应该是1-5。

但是，由于我有一个动态表，可以添加或删除行，所以当用户删除中间某个行时，就会出现问题。

假设您向表中添加了3个新行

row-1
row-2
row-3

如果您删除第二行，您将以

row-1
row-3

如果您添加了一个新行(因为我是从前一行获得id )，您将得到以下内容

row-1
row-3
row-4

如何解决这个问题？如何动态地更改行ids？

我认为这必须与行删除绑定，因为如果中间没有删除行，添加就不是问题。

下面是小提琴的一个例子。检查web浏览器中的id属性

Answer 1

您需要编写代码来重新排列索引1中的行ids。您可以使用gt选择器和.attr()回调函数将索引1中的行作为目标来设置新ids：

$('#t1 tr:gt(0)').attr('id',function(i,o){
    return "r"+ i++ ;
});

工作演示

Answer 2

您可以使用以下内容：

var rows = $('#t1 tr') // get the amount of rows

$.each(rows, function(i, e) {
    $(e).attr("id", "r" + i);// set the new id
})

​

$(document).on('click', '#addRow', function() {
  var row = parseInt($('#t1 tr:last-child').attr('id').replace(/[^\d]/g, ''), 10) + 1;
  $('#t1').append('<tr id="r' + row + '"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>');

  var rows = $('#t1 tr')

  $.each(rows, function(i, e) {
    $(e).attr("id", "r" + i);
  })
});

$(document).on('click', '.deleteRow', function() {
  var row = parseInt($(this).closest('tr').attr('id').replace(/[^\d]/g, ''), 10);

  if (row > 1) {
    $('#r' + row).remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr id="r1">
    <td>
      <input name="item[]" type="text" />
    </td>
    <td>
      <input name="quantity[]" type="number" />
    </td>
    <td>
      <button class="deleteRow">X</button>
    </td>
  </tr>
</table>
<button id="addRow">Add Row</button>

​