MooTools 1.2 Zebra Tables Example

CSS

.highlight { background:#d5fcdc; }
.even { background:#fff; }
.mo { background:#e3f1fb; }
.odd { background:#eee; }
.list-table th { padding:5px; background:#ddd; border-bottom:1px solid #999; text-align:left; font-weight:bold; }
.list-table td { padding:5px 20px 5px 5px; border-bottom:1px solid #ddd; }

XHTML

<table cellspacing="0" cellpadding="0" class="list-table">
  <tbody><tr class="odd">
   <th><b>Award</b></th>
   <th><b>Actor</b></th>
   <th><b>Film</b></th>
  </tr>
  <tr class="highlight">
   <td>Actor In A Leading Role</td>
   <td>Daniel Day-Lewis</td>
   <td>There Will Be Blood</td>
  </tr>
  <tr class="highlight">
   <td>Actress In A Leading Role</td>
   <td>Marion Cotillard</td>
   <td>La Vie en Rose</td>
  </tr>
  <tr class="highlight">
   <td>Actor In A Supporting Role</td>
   <td>Javier Bardem</td>
   <td>No Country For Old Men</td>
  </tr>
  <tr class="highlight">
   <td>Actress In A Supporting Role</td>
   <td>Tilda Swinton</td>
   <td>Michael Clayton</td>
  </tr>
  <tr class="highlight">
   <td>Directing</td>
   <td>Joel Coen and Ethan Coen</td>
   <td>No Country For Old Men</td>
  </tr>
 </tbody></table>

JavaScript

/* classes */
  var ZebraTable = new Class({
   //initialization
   initialize: function(table_class) {
    
    //add table shading
    $$('table.' + table_class + ' tr').each(function(el,i) {
     
     //do regular shading
     var _class = i % 2 ? 'even' : 'odd'; el.addClass(_class);
     
     //do mouseover
     el.addEvent('mouseenter',function() { if(!el.hasClass('highlight')) { el.addClass('mo').removeClass(_class); } });
     
     //do mouseout
     el.addEvent('mouseleave',function() { if(!el.hasClass('highlight')) { el.removeClass('mo').addClass(_class); } });
     
     //do click
     el.addEvent('click',function() {
      //click off
      if(el.hasClass('highlight'))
      {
       el.removeClass('highlight').addClass(_class);
      }
      //clock on
      else
      {
       el.removeClass(_class).removeClass('mo').addClass('highlight');
      }
     });
     
    });
   }
  });
  
  /* do it! */
  window.addEvent('domready', function() { 
   var zebraTables = new ZebraTable('list-table');
  });

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO