How to scroll through a multi-row table and select only one specific table?

Question

I’m trying to do that by clicking on a tr with a unique id, open a slideToggle with another table under the same line that was clicked. I made this example by opening the first and second line, only I wanted to do something dynamic.

I even managed to do it all at once but I wanted it that way I said it. If anyone can help me, I would appreciate it.

$(document).ready(function() {

  $('.slide').hide();
  var contar = $('.contar');
  var qtd = 0;
  contar.each(function() {
    qtd++;
  });

  $('#' + 1).click(function() {
    $('.slide' + 1).slideToggle();
  });
  $('#' + 2).click(function() {
    $('.slide' + 2).slideToggle();
  });

});

<tr class="info aba" id="<?php echo $cont ?>">
  <td class="labelAzul">
    <?php echo $listaPedidosSemanais[ "NOME"]?>
  </td>
  <td class="labelAzul">
    <?php echo $listaPedidosSemanais[ "SERVIÇO"]?>
  </td>
  <td class="labelAzul">
    <?php echo $listaPedidosSemanais[ "OPERADORA"]?>
  </td>
  <td class="labelAzul"><a href="javascript:void(0);" onclick="abrir('pedidos_Semanais_prescricao.php?id=<?php echo $listaPedidosSemanais[" ID "]?>&dtIni=<?php echo $_POST["periodoInicial "]?>&dtFim=<?php echo $_POST["periodoFinal "]?>','600','600')">Prescrição</a>
  </td>
  <td class="labelAzul"></td>
</tr>
<tr id="<?php echo $cont ?>">
  <thead>
    <th class="labelAzul slide  <?php echo " slide " . $cont ?>" data-field="PRESCRICAO" data-sortable="true">PRESCRIÇÃO</th>
    <th class="labelAzul slide <?php echo " slide " . $cont ?>" data-field="DATAINICIO IRGENCIA" data-sortable="true">DATA INICIO VIRGENCIA</th>
    <th class="labelAzul slide <?php echo " slide " . $cont ?>" data-field="DATAFIMVIRGENCIA" data-sortable="true">DATA FIM VIRGENCIA</th>
    <th class="labelAzul slide <?php echo " slide " . $cont ?>" data-field="DATALIBERACAO" data-sortable="true">DATA LIBERAÇÃO</th>
    <th class="labelAzul slide <?php echo " slide " . $cont ?>" data-field="DIFERENCA" data-sortable="true">DIFERENÇA</th>
  </thead>
  <?php $qryPrescricao=$ dao->listar_prescricoes($listaPedidosSemanais["ID"], $_POST["periodoInicial"], $_POST["periodoFinal"] ); $qtdPrescricao = count($qryPrescricao); foreach ($qryPrescricao as $pacientes){ ?>

  <tbody class="contar">
    <td style="text-align: center" class="labelAzul slide <?php echo " slide " . $cont ?>">
      <?php echo $pacientes[ "IDPRESCRICAO"]?>
    </td>
    <td style="text-align: center" class="labelAzul slide <?php echo " slide " . $cont ?>">
      <?php echo $pacientes[ "DT_INI_VIRGENCIA"]?>
    </td>
    <td style="text-align: center" class="labelAzul slide <?php echo " slide " . $cont ?>">
      <?php echo $pacientes[ "DT_FIM_VIRGENCIA"]?>
    </td>
    <td style="text-align: center" class="labelAzul slide <?php echo " slide " . $cont ?>">
      <?php echo $pacientes[ "DT_LIBERACAO"]?>
    </td>
    <td style="text-align: center" class="labelAzul slide <?php echo " slide " . $cont ?>">
      <?php $duracao=$ funcao->diferenca_data_hora($pacientes["DT_LIBERACAO"], $pacientes["DT_INI_VIRGENCIA"]); $dia = (int) substr($duracao, 0, 2); $tam = strlen($duracao); if($dia >= 2 && $tam >= 11){ $classHoraUtil = 'labelVermelho'; $fora_prazo++;} else{ $classHoraUtil =
      'labelAzul'; $dentro_prazo++;} echo "
      <label class=".$classHoraUtil.">".$duracao."</label>"; ?>
    </td>
    <?php }?>
  </tbody>
</tr>

Answer 1

Hello !

You do not need to use Jquery to do this, in a similar code I did the following:

<tr>
    <td><a id='".$id."' href='#'  onClick='return slide(this.id);'>Nome Exemplo</a></td>    
</tr>

So in Javascript recovered this way:

 function slide(id) { 
  $('.slide' + id).slideToggle();
 }

If you are working with Bootstrap, you can use this lib that transfers tr to a clickable link: http://www.jasny.net/bootstrap/javascript/#rowlink

Edit: Maybe to display the information below the line, it is interesting to use the bootstrap Collapse class.

<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">
      Texto Exemplo
  </div> 

Hugs,