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;

3 Responses to “Unobtrusive Zebra Striping”

  1. 1 Moch. Firmansyah January 22, 2009 at 10:35 pm

    can you tell me how to implement it on wp 2.7 by detail.

    thank you

  2. 2 jamieorc January 23, 2009 at 10:38 am

    I don’t have specifics for WP 2.7, but your really just need to install jQuery, then in your own javascript and css files, add the code above. That’s all there is to it.

  3. 3 Moch. Firmansyah January 26, 2009 at 11:16 pm

    Thank you for your reply Jamie,

    But i’m not a coder or programmer, can you tell me step by step and please give me an example.

    Thank Your Very Much

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s



Copyright ©2008-2013 James E Orchard-Hays, All Rights Reserved

%d bloggers like this: