Zebrar tabelas é um recurso amplamente utilizado para facilitar a leitura em documentos, além de dar um charme no projeto.

Para pintar alternadamente as linhas de uma tabela com Javascript na sintaxe nativa, teríamos que fazer um algoritmo para identificar se o elemento é par ou ímpar, e assim ir dando formatação as linhas.

O jQuery possui uma gama enorme de seletores próprios, que praticamente nos possibilita o controle total da interface. Vamos usar um desses seletores para identificar quais elementos <tr> da interface são pares, e atribuir cor a esses elementos.

Para este exercício, vamos criar uma estrutura HTML com uma tabela e uma classe CSS que vamos adicionar as linhas pares, e por fim o código JavaScript que será escrito com a sintaxe da biblioteca jQuery.

CSS

Caso você queira deixar as coisas mais bonitas e elegantes, acrescente mais regras aqui no CSS.


.par{background:#eee}

HTML

Uma estrutura de tabela bem simples e sem semântica, caso você vá aplicar isso ao seu projeto, veja a possibilidade de escrever a tabela o mais semântico possível, utilizando as tags thead, tbody etc…


<table>
    <tr>
        <td>elemento 1 da primeira linha</td>
        <td>elemento 2 da primeira linha</td>
        <td>elemento 3 da primeira linha</td>
        <td>elemento 4 da primeira linha</td>
    </tr>
    <tr>
    <td>elemento 1 da segunda linha</td>
        <td>elemento 2 da segunda linha</td>
        <td>elemento 3 da segunda linha</td>
        <td>elemento 4 da segunda linha</td>
    </tr>
    <tr>
        <td>elemento 1 da terceira linha</td>
        <td>elemento 2 da terceira linha</td>
        <td>elemento 3 da terceira linha</td>
        <td>elemento 4 da terceira linha</td>
    </tr>
    <tr>
        <td>elemento 1 da quarta linha</td>
        <td>elemento 2 da quarta linha</td>
        <td>elemento 3 da quarta linha</td>
        <td>elemento 4 da quarta linha</td>
    </tr>
</table>

jQuery

Agora vamos dar ação com o código javaScript…


$(document).ready(function(){

    $('table tr:even').addClass('par');

});

Na linha 4 utilizamos o seletor “even” que é responsável por identificar quais são os elementos pares que ficam na estrutura do DOM, e adicionamos a classe “par”. Essa técnica funciona em todos os browsers que tem suporte ao jQuery.

Caso você queira modificar os elementos impar, utilize no lugar do even o “odd”. Esses seletores servem não somente para elementos table, mas funcionam bem em listas, divs, parágrafos e vários outros elementos.

Como podemos ver, com a sintaxe do jQuery não passamos de uma linha para fazer esse efeito tão gracioso que é amplamente utilizado em projetos.

Não deixe de conhecer a documentação oficial do jQuery para seletores, tem a descrição destes e de vários outros seletores que deixam a nossa vida mais simples!

even