Tabela com efeito zebra usando jQuery

Com o jQuery, muitas coisas se tornam mais fáceis e rápidas na nossa produção, como por exemplo, adicionar um efeito "zebra" automaticamente a nossas tabelas.

Para isso, antes de mais nada, sertifique-se de carregar a biblioteca jquery para sua página.

Depois, criamos nossa tabela

1
2
3
4
5
6
7
8
9
0

Inserimos nosso estilo, escolhendo uma cor para as linhas ímpares e uma cor para as linhas pares.

.impar{background:#CCC}
.par{background:#999}

Agora o grande truque, nosso script que automatizará todo o processo.

$(document).ready(function() {
  $('table#MinhaTabela tr:odd').addClass('impar');
  $('table#MinhaTabela tr:even').addClass('par');
});

Prontinho, podemos fazer várias tabelas com cores diferentes usando seus respectivos ids!

Para ver em funcionamento, clique aqui.

Espero que tenham gostado, qualquer dúvida é só comentar!