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>
10 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….
Muito mais facil:
tr:nth-of-type(even) td { background-color: #eee; }
Funciona em Firefox, Safari, Chrome, Opera, IE9. Precisa entao usar JavaScript so em IE6,7,8.
Legal Peter, mas como mais de 30% das pessoas ainda usa uma das versões do IE, prefiro usar JS de uma vez e deixar a utopia do CSS3 para 2012 (se o mundo não acabar)…
Hmm… nao concordo com isso. Vc devia usar CSS3 em browsers que suporta, e JavaScript nos outros. Este parte de CSS3 esta pronta pra usar agora; nao deixe os browsers dinosauros atrapalha os modernos.
$(function(){
i = 0;
$(’tr:even’).each(function(){
$(this).css(’background’, ‘#eee’);
});
});
jQuery tah ae pra isso.. E funciona em todos os navegadores.. inclusive os IEs.
É verdade Fernando, jQuery também é uma boa solução, desde que você use-o para outras coisas além de apenas estilizar uma tabela. Afinal de contas, se a sua necessidade é apenas essa, não faz sentido importar um JS de 70kb para fazer o mesmo que um outro de 1kb faria, não é mesmo?
Abraço!
Sem dúvida! Se for pra importar o fonte do jQuery que seja feito bom uso do mesmo!
Abraço!