Question

我注意到严格使用jquery交替行颜色的问题。您可以查看此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中处理它吗？

Answer 1

据我所知，:odd适用于所有<TR>，因此您可以获得所描述的行为。我认为除非使用:odd，否则有任何方法可以更改并.table-striped相对于当前.each()。

对于这种特定情况，虽然有:nth-child的解决方法：

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

虽然如果特定<TR>是其直接父母的奇怪孩子，则适用，但如果您的<TABLE>包含多个<TBODY>，则可能会出错。

Answer 2

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');
 });

DEMO HERE

jQuery跨多个表的交替行颜色

2 个答案: