Alternar colores de filas par/impar (odd/even)

:nth-child() es una pseudo-classes que te permiten seleccionar elementos con algo parecido a una formula para poder darle estilos específicos. En este articulo solo hablare de como alternar los colores de las filas de una tabla, para por ejemplo crear un datagrid.

Usando CSS seria lo siguiente:

/* para las filas impares */
table tr:nth-child(odd) td {
    background-color: #ddd;
}

/* para las filas paras */
table tr:nth-child(even) td {
    background-color: #f6f6f6;
}

El único problema de esto es que Internet Explorer lo soporta solo a partir de la version 9, así que hay que buscar una alternativa.

Si usas jQuery, puedes hacer lo siguiente:

$(document).ready(function(){
    $('#datagrid tr:odd td").css("background-color", "#ddd");
    $('#datagrid tr:even td").css("background-color", "#f6f6f6");
});

Si usas Mootools, puedes usar este:

window.addEvent('domready', function(){
    $('datagrid').getElements('tr:odd td').setStyles({'background-color':'#ddd'});
    $('datagrid').getElements('tr:even td').setStyles({'background-color':'#f6f6f6'});
});

Por ultimo, aquí dejo un sitio donde puedes ver la compatibilidad entre CSS y los navegadores principales: CSS contents and browser compatibility

RECURSOS

Puedes visualizar un demo.

Ver demo
CompartirTwitter Facebook Google+ Pinterest LinkedIn Flipboard Delicious Addthis