Resaltar color de celda, filas y columnas de una tabla con Mootools

Con la ayuda de CSS es posible resaltar el color de fondo de un elemento HTML en este caso una celda, fila ó columna de una tabla. Con la ayuda de la propiedad :hover, soportado en la mayoría de navegadores (salvo IE6, grrrr!). Pero David Walsh nos explica una forma de lograr el resaltado de color con la ayuda de Mootools.

Tabla XHTML

<table id="highlight-table">
 <colgroup></colgroup>
 <colgroup class="slim"></colgroup>
 <colgroup class="slim"></colgroup>
 <colgroup class="slim"></colgroup>
 <colgroup class="slim"></colgroup>
 <thead>
 <tr>
 <th></th>
 <th></th>
 <th></th>
 <th></th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <!-- MORE ROWS -->
 </tbody>
</table>

CSS

table { border-collapse: collapse; width: 100%; margin-top:10px; }
td { border: 1px solid #ccc; padding: 10px; }
thead { width: 100%; height: 109px; background: url(header.png) no-repeat; }
.slim { width: 88px; }
.column-hover { background:#eee; }
.row-hover { background:#ddd; }
.cell-hover { background:#fffea1; }

Código JavaScript

window.addEvent('domready',function(){
/* METHOD 2: Better */
var table = document.id('highlight-table');
var rows = table.getElements('tr');
//for every row...
rows.each(function(tr,trCount){
 //we don't want the header
 if(tr.getParent().get('tag') == 'thead') { return false; }
 //add the row class to the row
 tr.addClass('row-' + trCount);
 //add the row listener
 tr.addEvents({
 'mouseenter': function(){
 tr.addClass('row-hover');
 },
 'mouseleave': function(){
 tr.removeClass('row-hover');
 }
 });
 //for every cell...
 tr.getElements('td').each(function(td,tdCount) {
 //remember column and column items
 var column = 'col-' + tdCount;
 var friends = 'td.' + column;
 //add td's column class
 td.addClass(column);
 //add the cell and column event listeners
 td.addEvents({
 'mouseenter': function(){
 $$(friends).erase(td).addClass('column-hover');
 td.addClass('cell-hover');
 },
 'mouseleave': function() {
 $$(friends).erase(td).removeClass('column-hover');
 td.removeClass('cell-hover');

  }
 });
 });
});
});

Sitio : David Walsh
Demo : http://davidwalsh.name/dw-content/mootools-table-columns.php