Question

如何修改下面的函数，使得行计数从1开始而不是从零开始，然后如果可能的话，按升序排序表行（从最小到最大）。

以下是相关代码：

$("tr.highlighted").remove();

renumberRows()

function renumberRows() {

    $('#data tr').each(function(index, el){
        $(this).children('td').first().text(index++);
    });

}

Answer 1

最简单的解决方案是使用CSS计数器（为简洁起见，所有非计数器相关的CSS都被删除）：

table {
    counter-reset: rowCounter;
}

tr td:first-child {
    counter-increment: rowCounter;
}

td:first-child::before {
    content: counter(rowCounter);
}

JS Fiddle demo

当然，上面的内容使用了一种简单的方法来删除可能或可能不符合您自己方法的行;然而，这是无关紧要的，因为CSS会自动重新编号行。

然而，使用jQuery，一旦tr被解雇，您需要显式重新计算.remove()元素。如果remove()允许一个简单的回调函数：

$(this).remove(function(){
    renumberRows();
});

但是，当然，remove()方法中的回调有 no 规定。因此，我们需要使用$.when()和.then()：

$.when($(this).remove()).then(renumberRows);

JS Fiddle demo

一旦renumberRows()被执行，它基本上会调用$(this).remove()函数。

虽然，考虑到一种有点愚蠢的解决方案，我以为我会尝试使用：

$(this).remove(renumberRows());

其中违背我的期望，有效：JS Fiddle demo。并且比使用$.when().then()链更简单。

参考文献：

CSS：
- “Using CSS Counters”。
- ::before pseudo-element。
- ::before and ::after pseudo-elements。
jQuery的：
- jQuery.then()。
- jQuery.when()。

删除行后，使用jQuery重新编号所有表行

1 个答案: