1

Tenho uma tabela da seguinte forma:

<tabele>
   <thead>
      <tr>Codigo</tr>
   </thead>
    <tbody>
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr>exemplo</tr>
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr>exemplo</tr>
    <tbody>
</tabele>

Tenho um script feito em JQuery que a cada click de acordo com a classe "click-show-hide-tr" ele mosta a proxima "tr" veja o script logo abaixo:

var toggleTable = (function () {
    var init = function(){
        $(".toggle-table tbody").on('click', '.click-show-hide-tr', function(){
        $(this).closest("tr").next().toggle();
        });
    };

    return {
        init:init
    }
})();

toggleTable.init();

Só que eu quero esconder todas as linhas secundária ao clicar novamente na primeira linha sem afetar as outras linhas que estão escondidas ou não Exemplo:

<tabele>
   <thead>
      <tr>Codigo</tr>
   </thead>
    <tbody>
       /**
        * Essa é a linha Principal supondo que as linhas secundarias
        * estejam à mostra ao clicar nela de novo 
        * quero esconder todas elas sem afetar 
        * as outras linhas
        */
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr>exemplo</tr>

        /**
         * Esse é outra linha Principal com suas linhas secundarias
         * Não posso afetar nada daqui para baixo
         */
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr class='click-show-hide-tr'>exemplo</tr>
       <tr>exemplo</tr>
    <tbody>
</tabele>

1 Resposta 1

1

Provavelmente sua seleção não está funcionando corretamente.

A função .closest("tr") procura o elemento "tr" antecessor, enquanto .next() procura todos os elementos irmãos sucessores, ou seja, o toggle está sendo aplicado para todas as linhas abaixo dos itens que possuem a classe '.click-show-hide-tr'.

Exemplo .next(): http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_next

Uma maneira de solucionar isso pode ser adicionando uma classe 'selecionado' ao item clicado. A partir dela você verifica quais linhas devem ser escondidas. Tente fazer assim:

$(".click-show-hide-tr").click(function(){

  // Se o item clicado nao estiver selecionado
  if(!$(this).hasClass("selecionado")) {

    // Adiciona a classe selecionado ao item
    $(this).addClass("selecionado");

    // Mostra as linhas secundarias apenas do item selecionado
    $(".click-show-hide-tr.selecionado").next().fadeIn();
  }	
  else {
    // Esconde as linhas secundarias apenas do item selecionado
    $(".click-show-hide-tr.selecionado").next().fadeOut();

    // Remove a classe selecionado do item
    $(this).removeClass("selecionado");
  }
});

3
  • Ainda estou tendo problemas, quando clico em qualquer outra linha todas as linhas filhas são escondidas...
    – Lucas Lima
    28/11/2016 às 12:38
  • tente usar $(".selecionado tr:first-child"); em vez de $(".click-show-hide-tr.selecionado").next();
    – Gabplay
    28/11/2016 às 14:38
  • Consegui aqui deu certo !
    – Lucas Lima
    1/12/2016 às 9:59

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 .