javascript - 为动态表行编号

Question

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

1. 追加一行
2. 删除特定行

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

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

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

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

Answer 1

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 2

在用户添加一行或删除一行后，您只需要遍历“数字”单元格。如果我们假设您有一个<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 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"
});

我的插件中执行此操作的方法如下所示：

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();
        });
    }