Question

I need some help with zebra striping a table using jQuery. I want the first table row to be red and then zebra stripe the rest of the rows.

I can make the first table row red using:

$("#my_table tbody tr:even").addClass("stripeRed");

But, if I add the zebra striping as follows, then it overrides the red stripe.

$("#my_table tbody tr:even").addClass("stripeWhite");
$("#my_table tbody tr:odd").addClass("stripeBlack"); 

How do I skip the first row when zebra striping?

Answer 1

Just add an exception to your selector for the first row using the jQuery Not selector

$("#my_table tbody tr:even:not(:first)").addClass("stripeWhite");
$("#my_table tbody tr:odd").addClass("stripeBlack");

Here is a fiddle showing it in action.

OR you could set the first row color AFTER the striping.