Unobtrusive Zebra Striping

Today I needed yet another zebra-striped table on a page. Having just converted this app to use jQuery, I thought, “there must be a simple way to decorate a table unobtrusively.” It was absolutley simple.

$(document).ready(function() {
  // adds classes for zebra striping table rows
  $('table.zebra tr:even').addClass('zebra_stripe');
}

Now, any table with the zebra class has its even rows decorated with the zebra_stripe class and those rows are styled like so:

tr.zebra_stripe {
  background-color: #F1F5FA;
}

Advertisements