0

Tenho uma tabela e quero que quando clicar no botão informações, apareça as informações da linha seguinte(que está oculta).

Para isso teria que pegar o valor da td que cliquei e habilitar com o display:block somente a linha com valor de td + 1.

parte da tabela(observem que tenho 2 tr, uma que é habilitada e pra cada uma dessas tenho 1 abaixo que é a que quero mostrar)

   {% for volume in volumes %}

     <tr>
            <td> {{ volume.nome }}</td>
            <td> {{ volume.tipo }}</td>"
            <td> {{ volume.snap }}</td>
            <td> {{ volume.porcentagem_snap }}</td>
            <td> {{ volume.volume_real }}</td>
            <td> {{ volume.volume_dados }}</td>
            <td> {{ volume.porcentagem_uso }}</td>
            <td><a class="btn-floating waves-effect waves-light  grey darken-2 info" data-element=".informacoes"><i
                    class="material-icons">info</i></a></td>
        </tr>
        <tr class="informacoes" style=" display:none">
            <td> Snapshot: {{ volume.snapshot_autodelete }} <br/> <br/> Snapshot Policy: {{ volume.snapshot_policy }}  </td>
            <td>Junction_Path: {{ volume.juction_path }}</td>
            <td> Export_Path: {{ volume.export_path }}   </td>
            <td>Deduplication: {{ volume.deduplication }} <br/> <br/> Deduplication Savings: {{ volume.deduplication_savings }}  </td>

        </tr>
    {% endfor %}

javascript/jquery

 // quando clicar em info abrir card com mais informações
                $(".info").click(function(e){
                 e.preventDefault();
                el = $(this).data('element');
                $(el).toggle();
                    });

No momento quando clico está abrindo todas as linhas desse tr

1 Resposta 1

0

No seu data-element você está colocando a classe .informacoes como parâmetro. O seu toggle vai agir nesse selector e vai fazer aparecer todos os elementos da classe .informacoes.

Uma outra forma de você obter a tag <tr> logo à frente é você utilizar a função next() do JQuery, que obtém o elemento imediatamente à frente do elemento selecionado. Mas como você está no contexto de uma tag <a>, você vai precisar utilizar o parents() primeiro (para viajar dois níveis acima, até o <tr>), e depois o next(). No fim, o seu código vai ficar assim:

                $(".info").click(function(e){
                   e.preventDefault();
                   var tr = $($(e).parents()[1]);
                   tr.next().toggle();
                });
3
  • Oi Pedro, tentei com o seu código, obtenho o seguinte erro: TypeError: e.parents is not a function. (In 'e.parents()', 'e.parents' is undefined)
    – Bianca C.
    2/02/2018 às 17:22
  • Para mim poderia ser por meio da tag <a> ou mesmo com um click na linha, o que for mais fácil.. Poderia ajudar?
    – Bianca C.
    2/02/2018 às 17:23
  • Obrigado! Vou corrigir o meu código. Em tempo: se você utilizar o evento de clique direto na linha, o elemento do evento vai ser o <tr>, e aí nesse caso seria só você usar o next(). 2/02/2018 às 17:30

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 .