1

estou fazendo uma tabela dinamica em html e preciso apresentar a subtabela apenas quando clicar na tr da tabela principal, segue o exemplo.

$(function () {
   $('#toggle3').click(function () {
       $('.toggle3').toggle('slow');
       return false;
   });
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<table>
  <thead>
    <tr>
    <th>Nome</th>
    <th>Dependentes</th>
    <th>Quantidade</th>
    </tr>
   </thead>
  <tboby>
    <tr>
      <td>Fulano</td>
      <td><a href="#" id="toggle3">convenio</a></td>
      <td>3</td>
    </tr>
    <tr>
      <td colspan="3"> 
        <div class="toggle3" style="display:none;">
<table width="200" border="6">
  <thead>
    <tr>
    <th>Nome</th>
    <th>Tipo</th>
    <th>Idade</th>
    </tr>
   </thead>
  <tr>
    <td>Maria</td>
    <td>Esposa</td>
    <td>47</td> 
    </tr>
  <tr>
    <td>Ana</td>
    <td>Filha</td>
    <td>12</td> 
    </tr>
  <tr>
    <td>Joaquim</td>
    <td>Filho</td>
    <td>06</td> 
  </tr>
  </table>
  </div>
       </td>
    </tr>
  </tbody>
  </table>

Mas no caso ter vários funcionários como passo o valor do id dinamicamente? Dentro do while eu coloquei uma váriavel $x++ que intera a cada novo funcionário, e no link eu coloquei o nome do toogle acrescido do valor da interação

<a href="#" id="toggle<?php echo $x; ?>">link</a>

Mas não sei como recuperar esse valor no javascript

2 Respostas 2

2

Boa noite!

Sugiro criar um atributo para a linha da tabela.

Exemplo:

<table>
    <tbody>
        <tr data-id="2">
        </tr>
    </tbody>
</table>

Em javascript tente o seguinte:

$('body').on ('click', 'table > tbody > tr', function (event) {
    event.preventDefault ();

    var linhaId = 0;
    if ($(this).attr('data-id')) {
        linhaId = $(this).attr('data-id');
    }

    ///
});
1

Da seguinte forma você captura o click usando $('td a').click() e o ID em var tmp = this.id;:

$(function () {
  $('td a').click(function () {
    var tmp = this.id;
    $('.'+tmp).toggle('slow');
    return false;
  });
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<table>
  <thead>
    <tr>
    <th>Nome</th>
    <th>Dependentes</th>
    <th>Quantidade</th>
    </tr>
   </thead>
  <tboby>
    <tr>
      <td>Fulano</td>
      <td><a href="#" id="toggle3">convenio</a></td>
      <td>3</td>
    </tr>
    <tr>
      <td colspan="3"> 
        <div class="toggle3" style="display:none;">
<table width="200" border="6">
  <thead>
    <tr>
    <th>Nome</th>
    <th>Tipo</th>
    <th>Idade</th>
    </tr>
   </thead>
  <tr>
    <td>Maria</td>
    <td>Esposa</td>
    <td>47</td> 
    </tr>
  <tr>
    <td>Ana</td>
    <td>Filha</td>
    <td>12</td> 
    </tr>
  <tr>
    <td>Joaquim</td>
    <td>Filho</td>
    <td>06</td> 
  </tr>
  </table>
  </div>
       </td>
    </tr>
  </tbody>
  </table>

2
  • 1
    Perfeito @ThiagoSantos era exatamente o que eu estava precisando, resolveu o problema proposto. Obrigado.
    – WMomesso
    Commented 10/02/2017 às 10:35
  • 1
    @WagnerFernandoMomesso fico feliz em ajudar, estamos aqui para fortalecer a comunidade, um abraço :) Commented 10/02/2017 às 10:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .