1

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

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

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

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

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

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

4

3 回答 3

3

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);
    });
于 2012-07-26T16:21:49.687 回答
1

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

1) 给他们一个漂亮的ID,例如row_0row_1等...

2)编写一个函数来迭代它们:

function updateRows(){
    $('[id*="row_"]').each(function(index){
        $(this).html(index + 1); // add +1 to prevent 0 index.
    };
};
于 2012-07-26T16:02:40.980 回答
-2

我已经编写了一个 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();
        });
    }
于 2012-07-26T16:09:24.383 回答