Zebra Striping with jQuery

November 18th, 2008 By: Wes

Zebra Striping a table with jQuery is ridiculously easy. This code will add even and odd classes to every row in all tables:

$(document).ready(function(){
  // Zebra stripe our tables
  $("table tr:odd").addClass("odd");
  $("table tr:even").addClass("even");
});

You can make it more selective by changing the table part in $("table tr:odd") to something like table.stripe, so it will only apply to tables with a stripe class.

Of course you’ll have to throw in some CSS so the even and odd classes actually do something:

table tr.odd {
  background-color: #fff;
}
 
table tr.even {
  background-color: #f3f3f3;
}