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类添加到具有odd类名的行之前的三行：

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

看起来像这样 。

Answer 2

这是一个可以处理更复杂公式的解决方案。

http://jsfiddle.net/JRPmw/

你改用jQuery的过滤器。 您可以根据需要提供复杂的等式，并为所需的行返回true。

$('tr').filter( function(n) {
    var x = (n+1) % 6;
    if (x >= 1 && x <= 3) return true;
}).addClass('threes');

Answer 3

尝试使用:nth-child选择器：

$("table tbody tr:visible:nth-child(6n+1)").addClass("even");
$("table tbody tr:visible:nth-child(6n+2)").addClass("even");
$("table tbody tr:visible:nth-child(6n+3)").addClass("even");
$("table tbody tr:visible:nth-child(6n+4)").addClass("odd");
$("table tbody tr:visible:nth-child(6n+5)").addClass("odd");
$("table tbody tr:visible:nth-child(6n+6)").addClass("odd");

http://jsfiddle.net/fliptheweb/5Xnvu/