unobtrusive zebra striping with prototype.js

November 30th, 2007
Posted by David Lowenfels
Filed in:
javascript

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! :)

actionmailer ActionView ajax alphadecimal audio autotest BDD blocks capistrano ssh ruby controller css dashboard widget delegate dog puppy naming name DRM email obfuscation exceptions factory pattern filemerge find and replace finder fink fixtures fun gem google maps helper helpers imagemagick Intertrust javascript logo math meetup model openssl OS X patch Pioneer Electronics plugin polymorphism prototype.js rails rake rmagick RSA encryption ruby script shoulda subversion SyncTV TDD testing textmate tricks unique hashes unix shell validation view yaml zebra stripes