In a previous post I showed how to use CSS3 to add a background color to every other row in a table, a technique called “zebra striping”. While this is a great technique, it doesn’t work in browsers that don’t support certain CSS3 features, such as Internet Explorer. By using a little jQuery we can make sure that every other row will have the background color, regardless of what browser the website user is on. Check out the demo and then grab the code for your project.
Copy and paste the following code into the head of your HTML file. Then add a table with multiple rows and you should see your table have different colors in every other row, just like the demo.
The code below is doing 3 things. First it is calling jQuery to be attached to the file. Second, we are assigning a background-color to the CSS class “odd”. The last step is using jQuery to automatically add the class “odd” to every other row. Pretty simple trick that works across browsers.