Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

hantaro

Script para criar as famosas ZebraTables

Por , em Javascript

Recommended Posts

hantaro    1

hantaro
Postado

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;
		}
	}
}

Um exemplo pratico seria

 

<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>

A função tem como primeiro parametro a tag em que vai se aplicar a função, o segundo parametro e o atributo do elemento, pode ser id, class ou voce pode inventar um, o terceiro é o valor que o atributo deve ter, o quarto e quinto as duas cores que a tabela tera

 

Pode ser usar quantas quiser na pagina, por exemplo:

 

LexTable('tr','lex','true','#ACACAC','#EBEBEB');
LexTable('tr','name','my','#FF0','#FFC');

Caso tenha varias tabelas e nao queira colocar tudo no onload, voce pode chamar a função de qualquer lugar da pagina, de qualquer evento, função, class, etc

 

Duvidas, sugestões, postem ai, e nao deixem de comentar por favor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Djonatan Buss    0

Djonatan Buss
Postado

 

Caso tenha varias tabelas e nao queira colocar tudo no onload, voce pode chamar a função de qualquer lugar da pagina, de qualquer evento, função, class, etc

 

Me explica os modos de chamar. Se possível com exemplos de evento, funçao, class e etc.

 

Tua função vai ser muito util aqui assim que conseguir fazer ela funcionar

Compartilhar este post

Link para o post
Compartilhar em outros sites

hantaro    1

hantaro
Postado

Fala cara, você usa a função da seguinte maneira:

 

1°: Coloque a funçao no head da pagina

2°: Crie a tabela, e em cada <tr> coloque um atributo, como por exemplo ID, e defina um valor para ele

3°: Chame a função atraves do onclick de botao, onload da pagina ou varias outras maneiras.

 

Segue alguns exemplos

 

// no onclick de uma tag html
<input type="button" onclick="LexTable('tr','lex','true','#ACACAC','#EBEBEB');" value="Zebra"/>

// no onload da pagina
<body onload="LexTable('tr','lex','true','#ACACAC','#EBEBEB');">

// dentro de outra função
function exemplo(){
LexTable('tr','lex','true','#ACACAC','#EBEBEB');
}

 

Quanto ao uso de class, você pode selecionar as tags html pela CLASS, ID, NAME ou qualquer atributo, ou você mesmo pode criar um, por exemplo

 

// você tem algumas DIV com class EXEMPLO, e deseja aplicar a função, então você faz o seguinte

LexTable('div','class','exemplo','#000000','#cccccc');

O codigo funciona tambem com outras tags, basta apenas você passa-la no PRIMEIRO parametro da função.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Djonatan Buss    0

Djonatan Buss
Postado

Fala cara, você usa a função da seguinte maneira:

 

1°: Coloque a funçao no head da pagina

2°: Crie a tabela, e em cada <tr> coloque um atributo, como por exemplo ID, e defina um valor para ele

3°: Chame a função atraves do onclick de botao, onload da pagina ou varias outras maneiras.

 

Segue alguns exemplos

...

 

 

Perfeito, to usando ja, mas essa tua expliação deixou muito claro os modos de uso.

Eu tinha tentado usar no body e funcionou, mas fiquei com receio pq incluo um .php que abre um <body> e ja vem com o próprio <head> então acabei abrindo um <body> dentro de um <body> e não sei ainda as consequencias disso mas parece não criar problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Usando jQuery:

$(function(){
	$("table tr:odd").addClass("odd");
	$("table tr:even").addClass("even");
});

No css:

 

tr.odd {
 	backgroud: #333;
}

tr.odd {
 	backgroud: #F0F0F0;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito