Categorias

Criando o efeito zebra em tabelas com JQuery

Chamamos de efeito zebra o ato de alternarmos as cores de plano de fundo das linhas de uma tabela. A estilização consiste em colorir as linhas pares de uma cor e as impares de outra cor. A principal vantagem além de alterar o visual da tabela, é facilitar a compreensão e a leitura da mesma.

Conseguimos esse efeito facilmente com as folhas de estilos em cascata (CSS). Para isso basta atribuir uma classe nas linhas pares (ou impares) e estilizar a classe conforme sua necessidade. Uma grande desvantagem é fazer isso em tabelas grandes.

Outra forma de se fazer isso é com uma linguagem de programação: PHP, ASP etc.

Aqui vou mostrar utilizando a biblioteca jQuery.

O código é bem simples, consiste em ter uma tabela com as tags thead e tbody, onde thead vai ser o cabeçalho da tabela e tbody o corpo da tabela, e no caso vamos ter 2 estilos, zebraUm e zebraDois que vão ser para variar os cores da linha. Para a utilização desse código faz-se necessário importar a biblioteca jquery.

Para zebrar basta do script que está no código abaixo, em anexo vai o exemplo completo:

Arquivos para Download:

zebra.rar