JQuery斑马条纹表,有行组

Question

我通常斑马条纹表行为奇数/偶数像这样,它运作良好:

$("table tbody tr:visible:even",this).addClass("even"); 
$("table tbody tr:visible:odd",this).addClass("odd");

但是,我有一个数据表,其中一组数据有三个连续的行.接下来的三个连续行将用于下一组数据.所以理想情况下我想先取三行,然后添加一个偶数类然后接下来的三行,得到一个奇数类.

Answer 1

这是我在jsfiddle上掀起的东西:

$("tr:nth-child(6n)").addClass("odd")
    .prev().addClass("odd")
    .prev().addClass("odd");

这样做是选择每个第6个tr元素,将其类设置为odd和前两个tr元素相同,从而为您提供3个"分组"行的结果.

有关nth-child()选择器的更多信息,请参阅此处的prev()函数.

您可以将代码更改为此类,以将even类添加到具有oddclassname的行之前的三行:

$("tr:nth-child(6n)").addClass("odd")
    .prev().addClass("odd")
    .prev().addClass("odd")
    .prev().addClass("even")
    .prev().addClass("even")
    .prev().addClass("even");

看起来像这样.