javascript - 使用 jquery 删除行时，第 nth-child css 不会重绘

Question

我有一个 jsfiddle 演示这里的问题:http://jsfiddle.net/xjmwY/

基本上，我有一个使用 nth-child(odd) 规则的 css3 斑马条纹表。

.myTable tr {
    background-color: #efefef;
}
.myTable  tr:nth-child(odd) {
    background-color: #fff;
}

当通过 jquery 删除一行时，我最终得到两个颜色相同的后续行。有什么办法可以让表格重新粉刷吗？

Answer 1

.fadeOut() 只是隐藏该行(将其淡化为透明然后将显示设置为无)，但它并没有真正删除它。为此，请使用 .remove():

$("tr").click(function(event) {
  event.preventDefault();
  $("#row_2").remove();
});

jsFiddle example

如果不能删除行，您可以按可见行和不可见行过滤行:

$("#row_2").fadeOut(function () {
    $('tr:visible').filter(":odd").css('background', '#fff');
});