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.
Here's something I whipped up on jsfiddle:
$("tr:nth-child(6n)").addClass("odd") .prev().addClass("odd") .prev().addClass("odd"); 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.
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"); That looks like this.
Here is a solution that can work with more complex formulas.
You use jQuery's filter instead. You provide as complex an equation as you like and return true for rows you want.
$('tr').filter( function(n) { var x = (n+1) % 6; if (x >= 1 && x <= 3) return true; }).addClass('threes'); Try use :nth-child selector :
$("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"); 