RibosoMatic Blog

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