Line number in table

Question

Line number in table

Navigation

#1 by (0 votes)

0

I have a table and I want it to appear when the information button is clicked on the next line (which is hidden).

For this I would have to get the value of the td that I clicked and enable with the display: block only the line with value of 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 display)

   {% 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, you are opening all lines of this tr

javascript html jquery table

asked by anonymous 02.02.2018 / 17:47

1 answer

get data json print php DataTable responsive, child duplicate

score 0 · Answer 1

In your data-element you are putting the .informacoes class as a parameter. Your toggle will act on this selector and will display all elements of the .informacoes class.

Another way for you to get the <tr> tag just ahead is to use the next() function of JQuery, which gets the element immediately ahead of the selected element. But since you're in the context of a <a> tag, you'll need to use parents() first (to travel two levels up, down <tr> ), then next() . In the end, your code will look like this:

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