[Resolvido] Esconder Tabelas em Javascript

[Progjunior Daniel 34]

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

[Progjunior Daniel 34]

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>