A little dab'll do ya
Code Snippets
jQuery Zebra Stripe a Table
$("tr:odd").addClass("odd");Then use some CSS:
.odd {
background: #ccc;
}A Web Design Community curated by Chris Coyier
$("tr:odd").addClass("odd");Then use some CSS:
.odd {
background: #ccc;
}
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.
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