Show / Hide jquery

Question

Show / Hide jquery

Navigation

#1 by (3 votes)

1

I have a table that shows values coming from the database. Below the line is trying to run a div to use the jquery toggle () function. I do not know what I'm doing wrong, because when it clicks it shows everyone. I just want the line clicked to appear in div. Thanks guys.

HTML:

<table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Nº do Cliente</th>
                                    <th scope="col">Nome</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Corretor</th>
                                    <th scope="col">Data de Cadastro</th>
                                    <th scope="col">Ações</th>
                                </tr>
                            </thead>
                            <tbody>

                                <?php




                                //aqui fica uma função PHP de SELECT. tirei pra nao ficar grande o codigo html. =) {
                                    ?>


                                    <tr style="padding:20px;">
                                        <td>ID</td>
                                        <td><span class="nomeTabela">Nome</span></td>
                                        <td>Ativo</td>
                                        <td>Eraldo Carlos</td>
                                        <td>20/06/2018</td>



                                    <tr class="tblOculto"><td>
                                            <div class="divOculto">
                                                Aqui vem a informação oculta.
                                            </div>
                                        </td></tr>
                                    <?php
                                }
                                ?>


                                </tr>

                            </tbody>
                        </table>

JQUERY:

$(document).ready(function(){
           $(".nomeTabela").click(function(){

               $('.tblOculto').css('display', 'block');
              $(".divOculto").slideToggle("slow");


           }); 
        });

html jquery

asked by anonymous 26.06.2018 / 01:37

1 answer

Bytearray size on disk Open window command

score 3 · Accepted Answer

This class seems unnecessary to me:

<tr class="tblOculto">

It would also make more sense to put a colspan="5" in the first td where it has the div hidden to follow the width of the table, since there are 5 columns:

<tr>
   <td colspan="5">
      <div class="divOculto">
         Aqui vem a informação oculta.
      </div>
   </td>
</tr>

Example:

$(document).ready(function(){
   $(".nomeTabela").click(function(){
      $(this)
      .closest('tr')        // pega a linha pai
      .next()               // pega a próxima linha
      .find('.divOculto')   // seleciona a div
      .slideToggle("slow"); // aplica o toggle
   }); 
});

.divOculto{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table table-striped table-hover">
   <thead>
      <tr>
         <th scope="col">Nº do Cliente</th>
         <th scope="col">Nome</th>
         <th scope="col">Status</th>
         <th scope="col">Corretor</th>
         <th scope="col">Data de Cadastro</th>
         <th scope="col">Ações</th>
      </tr>
   </thead>
   <tbody>
      <tr style="padding:20px;">
         <td>ID</td>
         <td><span class="nomeTabela">Nome</span></td>
         <td>Ativo</td>
         <td>Eraldo Carlos</td>
         <td>20/06/2018</td>
      </tr>
      <tr>
         <td colspan="5">
            <div class="divOculto">
               Aqui vem a informação oculta.
            </div>
         </td>
      </tr>
      <tr style="padding:20px;">
         <td>ID</td>
         <td><span class="nomeTabela">Nome</span></td>
         <td>Ativo</td>
         <td>Eraldo Carlos</td>
         <td>20/06/2018</td>
      </tr>
      <tr>
         <td colspan="5">
            <div class="divOculto">
               Aqui vem a informação oculta.
            </div>
         </td>
      </tr>
   </tbody>
</table>

Another error is you are closing the line outside the PHP loop: