jQuery Zebra Stripe a Table

$("tr:odd").addClass("odd");

.odd {
   background: #ccc;
}

8 Responses

1. Dor says:

   09/14/2009 at 4:01 pm

   Very nice! I didn’t know about :odd. You learn something new every day :D

   (However, I would use :even (assuming it exists), becuase I would like the first row as the “normal” color).

   Reply
2. Dyllon says:

   09/16/2009 at 10:53 pm

   Well, you can just do
   tr {background-color: #FFF;}
   and i think the .odd will override it, and if not you can always have the background color for the :odd to !important.

   Reply
3. nate says:

   02/15/2010 at 5:23 pm

   You are awesome Chris, thanks for posting all this stuff!

   Reply
4. fludotlove says:

   04/30/2010 at 12:59 am

   It’s better to use:

   $('tr:nth-child(odd)').addClass('odd');

   Since your example will count all table rows without consideration of what table they are in. The above code will always start with an even row, even if it’s essentially the 7th table row in your document.

   Reply
5. dani says:

   08/09/2010 at 6:21 pm

   i’m newbie. i try the code and not working. my i have full example for the using of the code ? thanks

   Reply
6. mike ilz says:

   08/24/2010 at 5:12 pm

   @dani, here is a simple demo explaining exactly how to use this code, and a live example of it being used.

   http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-jquery/

   Reply
7. fingerlicking says:

   08/29/2010 at 12:18 pm

   Why do you wanna use jQuery?? CSS is capable of this.

   Reply