$("tr:odd").addClass("odd");Then use some CSS:
.odd {
background: #ccc;
}jQuery Zebra Stripe a Table
Chris Coyier
on
(Updated on )
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).
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.
Yes, the .odd class will override it.
You are awesome Chris, thanks for posting all this stuff!
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.
thx! exactly what i was looking for
Bump! This is the implementation I needed because I have multiple tables on a page. This starts the index over with each new table on the page. Thanks!
i’m newbie. i try the code and not working. my i have full example for the using of the code ? thanks
@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/
Why do you wanna use jQuery?? CSS is capable of this.
That’s what I thought…
Is there a reason anybody???
Yes, CSS is capable of doing the Zebra striping, provided you have the appropriate HTML markup. Using jQuery for this purpose can reduce the amount of markup. Also, using jQuery for this purpose is helpful when you are dynamically adding or removing rows in a table on the client side with AJAX and you want to ensure that the table continues to have the desired zebra striping. After you add or delete a row, for example, you just call a jQuery function to reapply the zebra striping.
Another scenario where using jQuery for zebra striping is useful is when you are doing client-side sorting of a table. After the sort is done, you will want to reapply the zebra striping to the table rows.
I like to use $(‘tbody tr:odd’) – so that it looks at the tbody, and doesn’t count my header rows, but that is just me.
I use this all over the place, but am trying to see if zebra striping or row hight lighting works better in large tables. I have a on-line survey you can participate in if you are interested: http://access2learn.com/survey1/
Thanks.
If you want to reset the table after sorting or deleting rows etc. It takes two lines. I wonder if anyone knows how to put this into a function that can be called. resetStripes() or the like?
Here is the two line call I am making at the moment.
$(“.stripeme tbody tr”).removeClass(“alt”);
$(“.stripeme tbody tr:even”).addClass(“alt”);
Thanks,
Jana
I really liked this tip – it’s gonna be very useful, saving a lot of programming time…
Excelent. Very simpe solution. Thanks
Or to be very precise … i.e if you want the first row/li to have odd class you should do :
$(“tr:even”).addClass(“odd”);
(0 – based indexing )
I would just like to say its completely feasible with CSS only.
tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
and you can target specific tables if need be. (add class or id to your table)
table.mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
table.mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
or with IDs
table#mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
table#mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
Kudos for you. :D
I didn’t know about the odd pseudo element thanks
Yes you can do this with pure CSS, but what if you want it to work in IE8 or lower?
jQuery or a much longer DOM script makes it work.
Thnx for the ” simplest” idea for creating Zebra styling.
Now, how is it possible to do the same effect without jQuery ? (besides adding class=”odd” to the wanted rows !) .
Thanx in advance
you can now use tr:nth-child(2n) which will select every even row. Using tr:nth-child(2n-1) will select odd, tr:nth-child(3n) for every third tr
Thanks for this page!
How would you zebra-stripe a table where some of the rows have “display:none” tags on them? There are situations where we want to hide certain rows in different scenarios. But when we do, this zebra-striping “stripes” rows that don’t get displayed, resulting in odd-looking tables.
Instead of changing your css file, you could just do this: