Problema mostrar ocultar detalhes consulta

[manolegal 12]

Olá. Tenho uma tabela onde mostro os DADOS PRINCIPAIS e logo abaixo deles os DADOS SECUNDÁRIOS.

Estou conseguindo mostrá-los normalmente. Porém quando tento criar um script para mostrar/ocultar, é mostrado somente o primeiro valor secundário do primeiro dado principal.

<div id="list" class="row-fluid">
 <table class="table table-striped table-hover" cellspacing="0" cellpadding="0">
  <thead style="color:blue;">
   <tr>
    <th>Título 1</th>
    <th>Título 2</th>
   </tr>
  </thead>

<?php
       $Sql = "SELECT seleciono DADOS PRINCIPAIS";
       while ($linha = @pg_fetch_array($Resultado)) {   // While principal
       $id_principal = $linha["id"];
?>

 <tbody>
  <tr>
   <td>DADO PRINCIPAL</td>  // MOSTRO OS DADOS PRINCIPAIS E INCLUI 01 BOTÃO PARA MOSTRAR OS DETALHES DE CADA DADO PRINCIPAL
   <td>DADO PRINCIPAL</td>
   <td><button type="button" class="btn btn-warning btn-xs" onclick="mostra('det_modalidade')">Detalhar</button></td>  // Botão para mostrar/ocultar
  </tr>

<?php
      $Sql_det = "SELECT ....
FROM minha tabela WHERE id_da_minha_tabela = $id_principal";   AQUI FAÇO A BUSCA DOS DETALHES
      while ($linha = @pg_fetch_array($Resultado_det)) {    // While detalhes
      $id_secundario = $linha["id_secundario"];
?>

   // ESSA É A PARTE QUE QUERO MOSTRAR/OCULTAR. SÃO OS DETALHES. PARA CADA DADO PRINCIPAL HÁ OS DETALHES
   <tr id="det_modalidade" style="display:none;">
    <td>DADOS SECUNDÁRIOS</td>
    <td>DADOS SECUNDÁRIOS</td>
   </tr>

 </tbody>

<?php }}   // Fecho While principal e secundário ?>

</table>

</div>


<script type="text/JavaScript">
function mostra(id) {
    if (document.getElementById(id).style.display =="none") {
        document.getElementById(id).style.display="block";
    }
    else {
        document.getElementById(id).style.display="none";
    }       
}
</script>

Estou há dias tentando. Se alguém puder me auxiliar, agradeço.

[Gabriel Heming 766]

Mais parece uma inconsistência da divisão das colunas. Uma hora tem duas, outra três, depois duas novamente.

Visto que não é uma questão de PHP, estou movendo para a área de JavaScript.

[manolegal 12]

Obrigado pelo retorno.

Na verdade postei o código resumidamente para tentar explicar o problema e não deixar o tópico tão extenso.

Você acha que havendo inconsistência da divisão de colunas pode provocar este problema?

[William Bruno 1501]

isso acontece porque você não pode duplicar o atributo ID do HTML.

Uma forma é assim:

<?php
       $Sql = "SELECT seleciono DADOS PRINCIPAIS";
       while ($linha = @pg_fetch_array($Resultado)) {   // While principal
       $id_principal = $linha["id"];
?>

 <tbody>
  <tr>
   <td>DADO PRINCIPAL</td>  // MOSTRO OS DADOS PRINCIPAIS E INCLUI 01 BOTÃO PARA MOSTRAR OS DETALHES DE CADA DADO PRINCIPAL
   <td>DADO PRINCIPAL</td>
   <td><button type="button" class="btn btn-warning btn-xs" onclick="mostra('det_modalidade_<?php echo $id_principal; ?>')">Detalhar</button></td>  // Botão para mostrar/ocultar
  </tr>

<?php
      $Sql_det = "SELECT ....
FROM minha tabela WHERE id_da_minha_tabela = $id_principal";   AQUI FAÇO A BUSCA DOS DETALHES
      while ($linha = @pg_fetch_array($Resultado_det)) {    // While detalhes
      $id_secundario = $linha["id_secundario"];
?>

   // ESSA É A PARTE QUE QUERO MOSTRAR/OCULTAR. SÃO OS DETALHES. PARA CADA DADO PRINCIPAL HÁ OS DETALHES
   <tr id="det_modalidade_<?php echo $id_principal; ?>" style="display:none;">
    <td>DADOS SECUNDÁRIOS</td>
    <td>DADOS SECUNDÁRIOS</td>
   </tr>

 </tbody>

<?php }}   // Fecho While principal e secundário ?>

[manolegal 12]

Wiliam

Fiz as alterações sugeridas, houve mudanças no resultado. Porém está mostrando somente o primeiro DETALHE para cada dado principal, sendo que na maioria das situações existem vários detalhes para cada dado principal.

Linhas alteradas:

<td><button type="button" class="btn btn-warning btn-xs" onclick="mostra('det_modalidade_<?php echo $id_principal; ?>')">Detalhar</button></td>

<tr id="det_modalidade_<?php echo $id_principal; ?>" style="display:none;">

[William Bruno 1501]

ai você vai ter que fazer com classes então:

<tr class="det_modalidade_<?php echo $id_principal; ?>" style="display:none;">

e o js:

<script type="text/JavaScript">
function mostra(className) {
    var $objs = document.querySelectorAll('.' + className);

    $objs.forEach(function($item) {
        $item.style.display = $item.style.display != "none" ? "none" : "block";        
    });
}
</script>

[kelvim 11]

function mostra(id) {
    if (document.getElementsByClassName(id).style.display =="none") {
        document.getElementsByClassName(id).style.display="block";
    }
    else {
        document.getElementsByClassName(id).style.display="none";
    }       
}

<tr class="det_modalidade_<?php echo $id_principal; ?>" style="display:none;">

O id continua se repetindo, sugiro usar class no lugar do id

****** Opa, comecei a responder e quando terminei o bruno já tinha respondido. foi mal

[manolegal 12]

Tentei de ambas as formas, porém agora nenhum dado de detalhe é mostrado.

[manolegal 12]

No Chrome funciona, porém no Firefox não.

[William Bruno 1501]

correçãozinha:

<script type="text/JavaScript">
function mostra(className) {
    var $objs = document.querySelectorAll('.' + className);
    $objs = [].slice.call($objs);

    $objs.forEach(function($item) {
        $item.style.display = $item.style.display != "none" ? "none" : "block";        
    });
}
</script>

ai vai funcionar em todos.

[manolegal 12]

Certo. Obrigado.