Mahmoud ElMansy: knowledge meant to be free

Alternating-Table-Row-Color-with-jQuery-Css-Classes

How to make your table pretty with alternate row coloring using jQuery and CSS
First the style Sheet classes
we will make two classes to style the rows up


This style will affect table and the two classes are for row and alternate row

Second jQuery
jQuery has powerful feature of querying the page object




this function will get all tables that has id equals “MyTable”
and will iterate through its tr tags and get even and odd rows then apply CSS classes

The Complete Example:





alternating-table-row-color-with-jQuery-css-classes


Test Column 1 Test Column 1
1 1
2 2
3 3
4 4
5 5



The Table will look like this