Variable color for a row in a table, but with two rows of data

Question

I have a table setup for Zebra stripes, but how do I get a row color to alternate between 2 rows instead of a single row?

My data markup is as follows:

<tr> <td>@task.TaskNum</td> <td>@task.RepiarTime</td> <td>Priority Club</td> <td>SD</td> <td>Commercial</td> <td>Reg Commercial</td> <td>After Hours</td> </tr> <tr><td colspan="7"> @task.Description.ToString() </td></tr> 

I use this to break it up:

  $(document).ready(function () { $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); $(".stripeMe tr:even").addClass("alt"); }); 

Answer 1

Something like this should work:

 $(".stripeMe tr").each(function(i){ if (i%4 < 2){ $(this).addClass("alt"); } }); 

Answer 2

To split into two lines:

 $('.stripeMe tr:nth-child(3n+3)').addClass('alt'); $('.stripeMe tr:nth-child(3n+4)').addClass('alt'); 

Answer 3

Why not try nth-child? There are tons of variations here. How nth-child works. I am sure you can use pseudo-hang instead of .mouseover in javascript.

Answer 4

Try using .filter and get index() % 3 or (($(this).index()+1) % 3 == 0) . See code below

Demo

 $(document).ready (function () { $('#myTable tr').filter(function () { //or (($(this).index()+1) % 3 == 0) if you want 3rd row //to be highlighted first. return ($(this).index() % 3 == 0); }).addClass('alt'); }); 

Answer 5

Use jquerys nth child as follows:

 $(document).ready(function () { $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); $(".stripeMe tr:nth-child(3n)").addClass("alt"); // 3n selects every third element }); 

Answer 6

There should be a way in CSS, but if you want jQuery to try this jsFiddle example .

JQuery

 var index = 0; $('tr').each(function() { $(this).addClass((index <= 1) ? 'odd' : 'even'); index++; if (index == 4) index = 0; });​ 

CSS

 .odd { background: #999; } .even { background: #ddd; }​