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