Este es un tip sencillo pero a la vez fácil para dar estilos a una tabla, usando jQuery y un poco de CSS.
El framework jQuery tiene dos selectores disponibles para poder estilizar tablas: :even y :odd. El primero hace match con los elementos ‘par’ (incluyendo el cero) en una lista de elementos (0, 2, 4, 6, etc), mientras que el segundo selecciona los elementos impar (1, 3, 5, 7, etc).
Con estos selectores en mente, podemos hacer algo sencillo como:
$(‘.tabla tr:even’).addClass(‘tr-even’);
$(‘.tabla tr:odd’).addClass(‘tr-odd’);
Eso daría como resultado:
<table>
<tr class=”tr-even”><td></td></tr>
<tr class=”tr-odd”><td></td></tr>
<tr class=”tr-even”><td></td></tr>
<tr class=”tr-odd”><td></td></tr>
</table>
Partiendo de ahí podemos darle estilos a estas clases desde la hoja de estilos. Incluso si somos un poco flojos, podemos evitar el addClass y en lugar de eso, aplicar los estilos desde JavaScript:
$(‘table tr:even’).css(‘background’,'#ccc’);
$(‘table tr:odd’).addClass(‘background’,'#000′);
- :even Selector – jQuery API
- :odd Selector – jQuery API