JQuery – Tabela em zebra

Vou mostrar uma técnica simples para deixar as linhas de uma tabela em zebra, como na imagem abaixo.

Primeiro: Certifique-se que a biblioteca jquery esteja sendo invocada na página.

Vamos ao css:

.zebraUm{background:#C4DCC4}
.zebraDois{background:#EBF3EB}

Abaixo a tabela propriamente dita:
(Omitiram-se alguns códigos para reduzir o tamanho do código)

<table border="0">
<thead>
<tr>
<td>Destino</td>
<td>Saída</td>
<td>Chegada</td>
<td>Data</td>
</tr>
</thead>
<tbody>
<tr>
<td>Rio de janeiro</td>
<td>07:00</td>
<td>10:30</td>
<td>22/09</td>
</tr>
<tr>
<td>Rio de janeiro</td>
<td>07:00</td>
<td>10:30</td>
<td>22/09</td>
</tr>
<tr>
<td>Rio de janeiro</td>
<td>07:00</td>
<td>10:30</td>
<td>22/09</td>
</tr>
</tbody></table>

Agora temos o esqueleto da tabela, vamos adicionar o efeito mágico de tabela zebrada.

1
2
3
4

$(document).ready(function() {
   $('table tbody tr:odd').addClass('zebraUm');
   $('table tbody tr:even').addClass('zebraDois');
});

Explicando:
Linha 2: O seletor odd seleciona todas as linhas ímpares contidas no corpo da tabela.
Linha 3: O seletor even seleciona todas as linhas pares contidas no corpo da tabela.

Simples, não?