Home
índice
Página anterior

Efeito Zebra em Tabelas

Exemplo Core

Ônibus	Dia	Hora	Plat	Polt
Itapemirim	02/10/	20:40	54	24
Cometa	02/10/	20:40	23	29
Util	02/10/	20:40	65	43
São José	02/10/	10:40	24	03
Barra	02/10/	11:40	74	25
Serra Dourada	10/10/	20:40	54	24
Dorense	02/10/	13:40	33	24
Timóteo	02/03/	20:40	54	24
Paraíba	02/10/	20:40	54	24
Rio Doce	02/10/	20:40	54	24

Colorindo toda a Tabela

Recupera-se a tabela com o id filmes assim: #filmes, dentro da tabela tbody, dentro de tbody está o acesso às trs. Com o código abaixo todas as trs ficarão totalmente cinza. Em cada tr, adiciona-se uma classe, pode ser usado também css, para alterar diretamente no script os atributos de estilo dessas trs. Obs. O Html da tabela está logo abaixo, nessa mesma página.

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr").addClass("impar");
});

Colorindo as Linhas Ímpares

O código abaixo deixa o efeito de zebra de 1 em 1

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
});

Colorindo uma Determinada Linha

Com esse pseudo-seletor o índice começa da posição 1 e não de 0. Exclusivo desse seletor.

Se fosse uma coleção ou array, começaria do zero. Pode-se usar odd também que dá efeito zebra.
No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:nth-child(6)").addClass("impar");
});

Passando uma Equação

AJAX veja a Equação

Colorindo Linhas Pares

Nesse exemplo o retorno é linhas coloridas pares. Lembrete: Com esse pseudo-seletor o índice começa da posição 1 e não de 0.

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:nth-child(2n)").addClass("impar");
});

Colorindo Linhas Ímpares

Nesse exemplo o retorno é de linhas coloridas ímpares

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:nth-child(2n+1)").addClass("impar");
});

Colorindo Linhas em Blocos de Dois em Dois

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:nth-child(4n-1)").addClass("impar");
$("#onibus tbody tr:nth-child(4n)").addClass("impar");
});

Destacando Linhas com Uso de Hover

Nesse código o efeito de troca de cor ao passar o mouse, é obtido pelo uso de hover.

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("#onibus tbody tr").hover(
function(){$(this).addClass("destaque");},
function(){$(this).removeClass("destaque");}
);
});

        No Html:
       <table id="onibus">
	   <thead> 
	   <tr>
		<th>Ônibus</td>
		<th scope= "Col">Dia</th>
		<th scope= "Col">Hora</th>
		<th scope= "Col">Plataforma</th>
		<th scope= "Col">Poltrona<</th>
	  </tr>
	  </thead>
	  
         <tbody>
	 <tr>
		<th scope="row">Itaperim</th>
		<td>02/10/13</td>
		<td>20:40</td>
		<td>54</td>
		<td>24</td>
	  </tr> 
	   
	  <tr>
		<th scope="row">Cometa</th>
		<td>02/10/13</td>
		<td>20:40</td>
		<td>23</td>
		<td>29</td>
	  </tr> 
	    
	  <tr>
		<th scope="row">Util</th>
		<td>02/10/13</td>
		<td>20:40</td>
		<td>65</td>
		<td>43</td>
	  </tr> 
	
	</table>
        </tbody>