Question

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

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

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

Answer 1

Here's我在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");

看起来像this。

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/

JQuery斑马条纹表，有行组

3 个答案: