jQuery : How to highlight alternate rows of a table

While displaying large chunks of data in a table with lots of rows, it is really desireable to have a different background color for alternating rows. While there is no easy way you can do that using css alone, it is highly impractical to manually add a alt class to each alternate tr (table row). But thanks to the powerful selector engine of jQuery, you can very easily select an alternate tr . Here is how :


$("#mytable tr:odd").addClass("alt");

The above code selects every odd table row of the table with id mytable and adds a class alt to each of theme. Next you can style the alt class rows (tr) using css to make them stand out and add a nice zebra strip effect to your table.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2018 All rights reserved | Powered by WordPress
Back to top
Theme by dynamicguru.com