unobtrusive zebra striping with prototype.js

November 30th, 2007
Posted by David Lowenfels
Filed in:
javascript prototype.js zebra stripes

I just cooked up some flexible zebra striping for prototype. I call it ...drumroll please… ProtoStripe!

badum-ching! ;)


// protostripe.js

Event.observe( window, 'DOMContentLoaded', function() {

  $$('.striped').each( function(e) {
    Selector.findChildElements(e, ['tr','li']).each( function(e, idx) {
      e.addClassName( idx % 2 == 1 ? 'odd' : 'even');
    });    
  });

});

Just include it in your HTML header, and any tables or lists with class=”striped” will have their appropriate children decorated with “odd” and “even” CSS classes. Unobtrusive JavaScript rocks! :)

1 Response to “unobtrusive zebra striping with prototype.js”

  1. Markus Arike Says:
    September 18th, 2010 at 06:19 PM

    I was just working on a Rails app, and was using JQuery to stripe the tables. Until I noticed that, it was conflicting with the Prototype library that I needed. Because of you, out with the JQuery, and in with this snippet of code. Thanks a lot.

Leave a Reply