0

我注意到严格使用 jquery 交替行颜色的问题。您可以查看this fiddle以获取我将要描述的示例。

我正在使用 CSS3 来控制在多个表中按预期工作的表上的条带化。

.table-zebra tbody > tr:nth-child(even) > td {background-color: lightgrey;}

每个偶数行都带有浅灰色条纹。计数从第一行开始。

对于不支持 CSS3 的浏览器，我使用 jquery 来模仿：（.table-striped 用于此示例以显示小提琴的差异）

  $(".table-striped tr:odd").css("background-color", 'lightgrey');

当我有多个具有奇数行的表时，jquery 将继续从前一个表中计数，这会错误地交替行。

除了使用 $.each 之外，还有一种更简单的方法可以在 jquery 中处理这个问题吗？

4

2 回答 2

0

CSS：

tr.even td {
    background-color: green;
}
tr.odd td {
    background-color: yellow;
}

JS：

 $('.table-striped > tbody').each(function () {
     $('tr:odd', this).addClass('odd').removeClass('even');
     $('tr:even', this).addClass('even').removeClass('odd');
 });

在这里演示

于 2013-04-03T14:15:00.997 回答
0

据我所知，:odd它适用于所有<TR>s ，因此您会得到您描述的行为。我认为:odd除了.table-striped使用.each().

对于这种特定情况，尽管有一种解决方法:nth-child：

$(".table-striped tr:nth-child(:odd)").css("background-color", 'lightgrey');

虽然这适用于如果特定是其直接父母的奇数孩子，因此如果您的 s 包含多个s<TR>可能会做错事。<TABLE><TBODY>

于 2013-04-03T14:06:15.600 回答