0
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
Hi Pedro, I tried with your code, I get the following error: Typeerror: e.parents is not a Function. (In 'e. parents()', 'e. parents' is Undefined)
– Bianca C.
For me it could be through the <a> tag or even with a click on the line, which is easier.. Could help?
– Bianca C.
Thank you! I will fix my code. In time: if you use the direct-click event on the line, the event element will be the
<tr>
, and then in that case it would just be you using thenext()
.– Pedro Corso