Friday, April 5, 2013

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;
}

No comments:

Post a Comment