Home
índice
Página anterior

Exibir e Ocultar Linhas em Tabelas

Exemplo Core

Folha de Estilo

Ôni	D	H	Pl	Po
Ônibus Interestaduais
Cmta	02/10/	20:40	54	24
Cma	02/10/	20:40	23	29
Util	02/10/	20:40	65	43
Ônibus Estaduais
S José	02/10/	10:40	24	03
Barra	02/10/	11:40	74	25
Srra Dourda	10/10/	20:40	54	24
Dorse	02/10/	13:40	33	24
Timóteo	02/03/	20:40	54	24
Príba	02/10/	20:40	54	24
R Doce	02/10/	20:40	54	24

Ocultando Linhas

No exemplo abaixo, todas as linhas que não tenham a classe sub associada a elas serão ocultadas, logo que o documento for carregado. Primeiro localiza-se as linhas dentro de tbody. (A função hide oculta os elementos)

No javaScript:
$(document).ready(function(){
$("tbody tr:not(.sub)").hide();
});

Código src da Imagem

A título de confirmação, clique na imagem para ver o caminho.

No javaScript:
$(document).ready(function(){
$(".sub th").prepend("<img src='/static/img/sinal-mais.gif' class='maismenos'/>");
$("img").click(function(){
alert($(this).attr("src"));
});
});

Exibindo e Ocultando Linhas

O exemplo anterior esconde os elementos e não mostra mais. Para ocultar ou exibir as linhas de uma Tabela, o código abaixo, faz com que ao se clicar no sinal de mais ou no sinal de menos, a tabela abra e feche, de acordo com a escolha do símbolo. Esse é o código que está em funcionamento nessa página.

No Html:

        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 class="sub">
		<th colspan="5">Ônibus Interestaduais</th>
		</tr>
	 
	 <tr>
		<th scope="row">Itaperim</th>
		<td>02/10/13</td>
		<td>20:40</td>
		<td>54</td>
		<td>24</td>
	  </tr> 
	  
	  <tr class="sub">
		 <th colspan="5">Ônibus Estaduais</th>
	  </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>

No javaScript:
$(document).ready(function(){
$("tbody tr:not(.sub)").hide();
$(".sub th").prepend(" <img src='img/sinal-mais.gif' class='maismenos'/ >");
//Obs. Foram feitas duas imagens no paint. Do sinal de mais e do sinal de menos.
O css contendo o espaçamento da imagem, está no topo desta página. ("");
$("img").click(function(){
if($(this).attr("src") == "/static/img/sinal-menos.gif"){
$(this).attr("src", "/static/img/sinal-mais.gif")
.parents().siblings("tr").hide();
} else {
$(this).attr("src", "/static/img/sinal-menos.gif")
.parents().siblings("tr").show();
}
});
});