Publicado em 5 de jun.

[Resolvido] Esconder Tabelas em Javascript

Galera bom dia.

Mais um dia de luta, gostaria da ajuda de voces se voces souberem. Tenho uma tabela sendo alimentada com 3 lacos de for um dentro do outro, só que cada laco representa uma coisa, gostaria de fazer o seguinte efeito:

Quando clicasse na linha ela sumisse todo conteudo.

Numero de 3 clicks nas linhas porque são 3 laços de for.

Consegui ate esconder, só que uma linha de cada laço e cada laço tem 3 ou mais linhas. voces conseguem me ajudar?

Segue o codigo abaixo.

 for($x=0;$x<$cont_projeto;$x++)
 { ?>

<tr style="cursor:pointer;" bgcolor="#CEE7FF">
 <td class="azul_bold" width="200" style="padding:5px;"><?=$lista[0][0][0]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][1]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][2]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][3]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][4]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][5]?></td>
 </tr>
<? for($a=0;$a<$cont_rede;$a++){ ?>
 <tr style="cursor:pointer; display:none" bgcolor="#FFE6BF">
 <td class="azul_bold" width="200" style="padding-left:20px;"><?=$lista[1][$a][0]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][1]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][2]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][3]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][4]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][5]?></td>
 </tr>
<? for($b=0;$b<count($c_reg[$y]);$b++){?>
 <tr style="cursor:pointer; display:none" bgcolor="#FFC">
 <td class="azul_bold" width="200" style="padding-left:40px;"><?=$lista[2][$k][0]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][1]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][2]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][3]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][4]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][5]?></td>
 </tr>
<? for($c=0;$c<count($c_esc[$z]);$c++){?>
 <tr style="cursor:pointer; display:none" bgcolor="#EBFFBF">
 <td class="azul_bold" width="200" style="padding-left:60px;"><?=$lista[3][$w][0]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][1]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][2]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][3]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][4]?></td>
 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][5]?></td>
 </tr>
<? $w++;
 } $k++;
 $z++;
 } $y++;
 }
 ?><
	<?	} ?>

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Progjunior Daniel· 6 de jun.

bem ninguem respondeu mas eu coloco aqui minha solucao.

a tabela fica assim:

<tr style="cursor:pointer;" bgcolor="#CEE7FF" class="projeto" id="<?=$x?>">

 <td class="azul_bold" width="200" style="padding:5px;"><?=$lista[0][0][0]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][1]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][2]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][3]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][4]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[0][0][5]?></td>

 </tr>

 <?

 for($a=0;$a<$cont_rede;$a++){

?>

 <tr style="cursor:pointer;" bgcolor="#FFE6BF" class="rede" id="<?=$x?><?=$a?>">

 <td class="azul_bold" width="200" style="padding-left:20px;"><?=$lista[1][$a][0]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][1]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][2]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=number_format((($lista[1][$a][2]/$lista[1][$a][1])*100),2,",",".")."%"?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[1][$a][4]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=number_format((($lista[1][$a][4]/$totalgeralAcesso)*100),2,",",".")."%"?></td>

 </tr>

 <?

 for($b=0;$b<count($c_reg[$y]);$b++){?>

 <tr style="cursor:pointer;" bgcolor="#FFC" class="regional" id="<?=$x?><?=$a?><?=$b?>">

 <td class="azul_bold" width="200" style="padding-left:40px;"><?=$lista[2][$k][0]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][1]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][2]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=number_format((($lista[2][$k][2]/$lista[2][$k][1])*100),2,",",".")."%"?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[2][$k][4]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=number_format((($lista[2][$k][4]/$totalgeralAcesso)*100),2,",",".")."%"?></td>

 </tr>

 <?

 for($c=0;$c<count($c_esc[$z]);$c++){?>

 <tr style="cursor:pointer;" bgcolor="#EBFFBF" class="escola" id="<?=$x?><?=$a?><?=$b?><?=$c?>">

 <td class="azul_bold" width="200" style="padding-left:60px;"><?=$lista[3][$w][0]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][1]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][2]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=number_format((($lista[3][$w][2]/$lista[3][$w][1])*100),2,",",".")."%"?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=$lista[3][$w][4]?></td>

 <td class="azul_bold" align="center" width="100" style="padding:5px;"><?=number_format((($lista[3][$w][4]/$totalgeralAcesso)*100),2,",",".")."%"?></td>

 </tr>

 <?

 $w++;

 } $k++;

 $z++;

 } $y++;

 }

 } ?>

e o jquery fica assim:

<script type="text/javascript">

$(document).ready(function() {

	$('.rede').hide();

	$('.regional').hide();

	$('.escola').hide();

 

	$('tr.projeto').click(function(){

 

 var idTR = this.id;

 

 

 <?for($rede=0;$rede<$a;$rede++){?>

 $('#'+idTR+'<?=$rede?>').toggle();

 <?for($regi=0;$regi<$b;$regi++){?>

 $('#'+idTR+'<?=$rede?>'+'<?=$regi?>').hide();

 <?for($y=0;$y<$c;$y++){?>

 $('#'+idTR+'<?=$rede?>'+'<?=$regi?>'+'<?=$y?>').hide();

 <?}?>

 <?}?>

 <?}?>

 

 

 }, function() {

 

 var idTR = this.id;

 <?for($rede=0;$rede<$a;$rede++){?>

 $('#'+idTR+'<?=$rede?>').toggle();

 <?for($regi=0;$regi<$b;$regi++){?>

 $('#'+idTR+'<?=$rede?>'+'<?=$regi?>').hide();

 <?for($y=0;$y<$c;$y++){?>

 $('#'+idTR+'<?=$rede?>'+'<?=$regi?>'+'<?=$y?>').hide();

 <?}?>

 <?}?>

 <?}?>

 });

 

	$('tr.rede').click(function(){

 

 var idTR = this.id;

 

 <?for($regi=0;$regi<$b;$regi++){?>

 $('#'+idTR+'<?=$regi?>').toggle();

 <?for($y=0;$y<$c;$y++){?>

 $('#'+idTR+'<?=$regi?>'+'<?=$y?>').hide();

 <?}?>

 <?}?>

 

 

 }, function() {

 

 var idTR = this.id;

 <?for($regi=0;$regi<$b;$regi++){?>

 $('#'+idTR+'<?=$regi?>').toggle();

 <?for($y=0;$y<$c;$y++){?>

 $('#'+idTR+'<?=$regi?>'+'<?=$y?>').hide();

 <?}?>

 <?}?>

 

 });

 

	$('tr.regional').click(function(){

 

 var idTR = this.id;

 

 <?for($y=0;$y<$c;$y++){?>

 $('#'+idTR+'<?=$y?>').toggle();

 <?}?>

 

 }, function() {

 

 var idTR = this.id;

 <?for($y=0;$y<$c;$y++){?>

 $('#'+idTR+'<?=$y?>').toggle();

 <?}?>

 

 });

 

 

});</script>