Alternating table row color, but with 2 rows of data

Question

I've got my table setup for Zebra striping, but how do I accomplish making the row color alternate for 2 rows instead of a single row?

My data markup looks like this:

<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 am using this to stripe it:

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

add an alternate class to the rows you want styled. I doubt you'll be able to rely on css rules for that. — Jim H.
– Jim H., Commented Mar 20, 2012 at 20:41

Kai Sternad · Accepted Answer · 2012-03-20 20:46:15Z

6

Something like this should work:

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

answered Mar 20, 2012 at 20:46

Kai Sternad

23k8 gold badges50 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

codaniel · Accepted Answer · 2012-03-20 23:25:02Z

4

To do striping every two rows:

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

answered Mar 20, 2012 at 23:25

codaniel

5,2531 gold badge25 silver badges32 bronze badges

2 Comments

PerryJ Over a year ago

I think you meant 4n+3 and 4n+4 ?

user736893 Over a year ago

With @PerryJ's addendum, I think this is the simplest and best answer. Thanks!

Wesley Terry · Accepted Answer · 2012-03-20 20:45:25Z

Why not try nth-child? Here are a bunch of variations here. How nth-child works. I'm sure you can use the pseudo :hover instead of .mouseover in javascript.

Selvakumar Arumugam · Accepted Answer · 2012-03-20 20:46:45Z

Try using .filter and get the 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'); });

j08691 · Accepted Answer · 2012-03-20 20:53:01Z

There should be a way in CSS to do this, but if you want jQuery 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; }

Turnip · Accepted Answer · 2012-03-20 20:55:43Z

Use jquerys nth child like this:

$(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 });

Collectives™ on Stack Overflow

Alternating table row color, but with 2 rows of data

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related