JQuery斑马条纹表，有行组 [英] JQuery zebra stripe table that has groups of rows

问题描述

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

I typically zebra stripe table rows for odd / even like so and it works well:

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

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

However, I have a data table where there are three consecutive rows for 1 set of data. The next three consecutive rows would be for the next set of data. So ideally I'd like to take the first three rows and add a class of even and then the next three rows after that to have a class of odd.

推荐答案

这里是我在jsfiddle上掀起的东西：

Here's something I whipped up on jsfiddle:

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

这样做是每隔6次选择 tr element，将其类设置为 odd ，并且与之前的两个 tr 元素相同，从而为您提供结果3个分组行。

What this does is select every 6th tr element, set its class to odd, and the same to the previous two tr elements, thus giving you the result of 3 "grouped" rows.

有关> nth-child（） 选择器，以及有关 prev（） 此处有函数。

More about the nth-child() selector here, and more about the prev() function here.

您可以将代码更改为此将甚至类添加到奇数类名称之前的三行：

You could change the code to this to add an even class to the three rows preceding the ones with the odd classname:

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

看起来像这个。

这篇关于JQuery斑马条纹表，有行组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！