Script para criar as famosas ZebraTables
Bom gostaria de compartilhar esse script que cria as famosas zebra-tables, que montei depois de ler um post em um blog dizendo que é muito complicado de fazer sem as frameworks.
O diferancial é que voce nao fica preso a ids ou class, por exemplo voce pode definir um atributo que nem existe na sua <tr> ou se for o caso outro elemento que esteja usando.
Com questao a validação do W3C, realmente ele vai reconhecer seu atributo como um erro, mas isso nao interferi em nada, pois se ele nao existe nao tem como causar erros em sua pagina.
A parte que seleciona os atributos é uma pequena modificação da funçao getElementsByAttr criada por Pedro Rogério
Para usar basta apenas chamar a função no onload da pagina ou do modo que mais lhe for benefico, vejamos o codigo e um exemplo pratico.
function LexTable(tag,attr,value,one,two){
var array=new Array();
var tags=document.getElementsByTagName(tag);
for(var i=0;i<tags.length;i++){
if(tags[i].getAttribute(attr)==value){
array[array.length]=tags[i];
}
}
for(var j=0;j<array.length;j++){
if(j%2==0){
array[j].style.background=one;
}else{
array[j].style.background=two;
}
}
}<body onload="LexTable('tr','lex','true','#ACACAC','#EBEBEB');">
<table>
<tr lex="true"><td>Primeira Linha</td></tr>
<tr lex="true"><td>Segunda Linha</td></tr>
<tr lex="true"><td>Terceira Linha</td></tr>
<tr lex="true"><td>Quarta Linha</td></tr>
<tr lex="true"><td>Quinta Linha</td></tr>
</table>
</body>Pode ser usar quantas quiser na pagina, por exemplo:
LexTable('tr','lex','true','#ACACAC','#EBEBEB');
LexTable('tr','name','my','#FF0','#FFC');Duvidas, sugestões, postem ai, e nao deixem de comentar por favor.
Discussão (4)
Carregando comentários...