Question

我正在使用jQuery制作动态HTML表格。在表格中，我的用户有两种互动：

追加一行
删除特定行

对行进行编号的问题是，如果用户删除特定行，则该行之后的所有行都需要重新编号。我必须选择删除行后面的所有行，并将它们的数字减去1.

有没有更好的方法来解决这个问题？

编辑：这是一个证明问题的JSFiddle：http://jsfiddle.net/LNXae/2/

我知道有序列表会自动重新编号我的行，但我宁愿使用一个表，因为我现在给出的例子很简单。

Answer 1

用户添加了行或删除了一行后，您只需要遍历“数字”单元格。如果我们假设您有<td>元素，我们：

1）给他们一个不错的ID，例如row_0，row_1等等......

2）编写一个迭代它们的函数：

function updateRows(){
    $('[id*="row_"]').each(function(index){
        $(this).html(index + 1); // add +1 to prevent 0 index.
    };
};

Answer 2

http://jsfiddle.net/mblase75/LNXae/1/

首先，将计数器数字包装在一个<span>的类中，以便日后查找：

$new_row.children('td').prepend('Row #<span class="num">' + ($new_row.index() + 1) + "</span>");

然后在删除所需行后，使用.each循环更新所有这些跨度。传递给.each的回调函数的第一个参数是一个从零开始的索引号，第二个参数是HTML元素：

    var $row = $(this).closest('tr'),
        $table = $row.closest('table');
    $row.remove();

    $table.find('tr').each(function(i, v) {
        $(v).find('span.num').text(i + 1);
    });

Answer 3

我编写了一个jquery插件，它正是这样做的，你不需要对这些行进行“编号”。删除行时您需要做的就是传递要删除的行的索引。

例如，如果您有一行删除按钮：

<table>
 <tr>
    <td> <input type="button" class="delete" value="delete this row" /></td>
 </tr>
</table>

jQuery可能看起来像

$('.delete').click(function(){
 var index = $(this).parents('tr').index();
 // tell your plugin to delete row "index"
});

来自 my 插件的方法就是这样的：

removeRow: function (index) {
        return this.each(function () {
            var $this = $(this);
            var $tbody = $('tbody', $this);
            var $tr = $('tr', $tbody).eq(index);
            $this.trigger('rowRemoved', [$tr]);
            $tr.remove();
        });
    }

编号动态表行

3 个答案: