Row number in table

Question

I have a table and I want that when you click on the info button, the next row information appears (which is hidden).

To do this you would have to take the value of td that I clicked and enable with the display:block only the line with value td + 1.

part of the table(note that I have 2 tr, one that is enabled and for each of these I have 1 below which is the one I want to show)

   {% 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();
                    });

At the moment when I click is opening all lines of this tr

Answer 1

In his data-element you’re putting the class .informacoes as parameter. Your toggle will act on this selector and will display all class elements .informacoes.

Another way to get the tag <tr> just ahead is you use the function next() jquery, which fetches the element immediately in front of the selected element. But as you are in the context of a tag <a>, you will need to use the parents() first (to travel two levels up, up to the <tr>), and then the next(). In the end, your code will look like this:

                $(".info").click(function(e){
                   e.preventDefault();
                   var tr = $($(e).parents()[1]);
                   tr.next().toggle();
                });