Em primeiro lugar, você deve estar se perguntando: O que diabos quer dizer ‘zebrar’ uma tabela? Eu explico: uma tabela ‘zebrada’ é aquela que tem linhas intercaladas com cores diferentes. Dessa maneira.
Não há segredo nenhum em fazer isso, é algo muito simples via CSS. Basta colocar uma class na linha que você quer que tenha uma cor diferente e configurar o background no CSS. Bem, agora você deve estar se perguntando: Ok, se é tão fácil, então pra que eu preciso de um função javascript pra fazer isso?
Vantagens em usar JS para zebrar uma tabela:
• Se a sua tabela for extensa, com muitas linhas, isso vai poupar bastante tempo.
• Se os dados vêm de uma base dinâmica, você não precisará alterar a maneira como sua tabela é montada.
• Maior liberdade para mover linhas acima e abaixo sem se preocupar em manter a ordem das classes.
• Se depois o código tiver que ser editado por alguém sem muita intimidade com HTML, você não corre o risco de ficar com a tabela desconfigurada.
• Se você mudar de idéia e quiser tirar o fundo de todas as linhas basta deletar a função, ao invés de ter que editar a tabela toda.
O código da função:
<script>
function zebra(id, classe) {
var tabela = document.getElementById(id);
var linhas = tabela.getElementsByTagName("tr");
for (var i = 0; i < linhas.length; i++) {
((i%2) == 0) ? linhas[i].className = classe : void(0);
}
}
</script>
Basicamente, funciona da seguinte forma: a função aceita dois parâmetros, o id da tabela na qual será aplicada a ‘zebra’ e o nome da class que você definiu no seu css. Então um loop percorre toda a tabela, atribuindo a classe definida em todas as linhas ímpares.
O código CSS:
tr.zebra td {background:#eee;}
E para usá-la, basta incluir a seguinte linha após a tabela:
<script> zebra('minhatabela', 'zebra'); </script>
