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

Leave a Reply