0

我使用 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 冲突。（见下面的答案）。然而，冲突并没有设置背景颜色。所以，我仍然想知道为什么规则会导致冲突。

4

3 回答 3

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');
于 2013-03-29T21:01:58.967 回答
1

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

样式.css：

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

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

于 2013-03-29T21:06:42.030 回答
0

发现了问题。

我的问题中的代码有效，但存在 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/

于 2013-03-29T21:20:56.420 回答