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 [...]
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?
Existem algumas 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>
4 Comentários
Tentei utilizar seu código, que por sinal é bem interessante, no entanto ele não funciona no IE. Você tem alguma dica?
Olá Vitor!
Ahh o IE6, sempre ele… fiz alguns testes aqui e descobri o problema. Algo bastante simples: dentro da função, a variável que contém o nome da classe que deve ser aplicada à linha zebrada chama-se ‘class’. Porém, no IE6, isso está causando conflito pois o browser usa esse nome de variável para outras informações e não ‘entende’ que seu escopo é restrito à função.
Para resolver basta trocar o nome do parâmetro de ‘class’ para ‘classe’. Já atualizei o exemplo, pode pegar o código de lá se quiser.
Havia testado no IE7 e como a função é tão simples não pensei que pudesse haver qualquer incompatibilidade com o famigerado IE6… :)
Abraço e obrigado pelo toque!
Valeu Domênico, resolveu de forma simples o meu problema de tornar as tabelas imensas mais interessantes. São gestos assim que torna a internet cada vez melhor. Obrigado mesmo!
muito bom….