jQuery remove() 之后的斑马条纹

Question

我使用 jQuery 对表格进行斑马条纹处理，因为它适用于 ie8。

$('table.data tr:nth-child(odd)').css('background-color', '#ececec');

问题是，我有一个按钮可以让你删除一行。

$(this).parents('tr').remove();

这会消除斑马条纹。所以我试过了：

$(this).parents('tr').remove();
$('table.data tr:nth-child(odd)').css('background-color', '#ececec');
$('table.data tr:nth-child(even)').css('background-color', '#ffffff');

和

$(this).parents('tr').remove();
$('table.data tr').css('background-color', '#ffffff');
$('table.data tr:nth-child(odd)').css('background-color', '#ececec');

两者都不起作用。 .remove() 没有回调函数，否则我会将斑马条纹放入其中。有什么想法吗？

编辑 - 上面的代码有效，但存在 css 冲突。 （见下面的答案）。然而，冲突并没有设置背景颜色。所以，我还是想知道为什么这条规则会导致冲突。

Answer 1

.remove 不需要回调，因为它是同步的。我建议从 .css 移开并使用一个类，这样您就可以简单地删除该类，然后将其添加回奇数行。

进行初始条带化：

$('table.data tr:nth-child(odd)').addClass('odd');

然后删除：

$(this).parents('tr').remove();
$('table.data tr').removeClass('odd').filter(':nth-child(odd)').addClass('odd');

Answer 2

如果您的目标是相当现代的浏览器（IE 9+），您可以使用 CSS3 样式表来处理所有这些问题。

style.css：

table.data tr:nth-child(odd)
{
    background-color: #ececec;
}
table.data tr:nth-child(even)
{
    background-color: #ffffff;
}

不需要javascript；这些规则由浏览器应用，并在 DOM 更改时自动重新应用。

Answer 3

找到问题了。

我的问题中的代码有效，但存在 css 冲突。奇怪的是，导致冲突的 css 规则没有设置background-color

table.headerShadow tr:nth-child(2) {
    background-image:url(../_images/faux-shadow.png);
    background-repeat:repeat-x;
}

删除规则可以解决问题。奇怪，嗯？为什么该规则会导致冲突？

这里有一个小提琴来演示：http://jsfiddle.net/W7yZC/2/