I need to dynamically hide/show table rows from this table. How can I do that with javascript? I can’t seem to figure it out.
PS, using the data-id isn’t possible.
<div class="view-grid">
<span aria-label="Kies één record en klik op Selecteren om door te gaan" tabindex="0">
Kies één record en klik op Selecteren om door te gaan
</span>
<table aria-relevant="additions" role="grid" class="table table-fluid table-hover">
<thead>
<tr>
<th scope="col" aria-readonly="true" style="width:5.141388174807198%;" class="sort-disabled" aria-label="Selecteren" data-th="<span class='fa fa-check' aria-hidden='true'></span> <span class='sr-only'>Selecteren</span>">
<span class="fa fa-check" aria-hidden="true"></span>
<span class="sr-only">Selecteren</span>
</th>
<th scope="col" aria-readonly="true" style="width:17.737789203084834%;" class="sort-enabled">
<a href="#" role="button" aria-label="Name" tabindex="0">
Name<span class="sr-only sort-hint">. aflopend sorteren</span>
</a>
</th>
<th scope="col" aria-readonly="true" style="width:77.12082262210797%;" class="sort-enabled">
<a href="#" role="button" aria-label="Omschrijving" tabindex="0">
Omschrijving<span class="sr-only sort-hint">. aflopend sorteren</span>
</a>
</th>
</tr>
</thead>
<tbody style="">
<tr data-id="7b9cf41e-1189-ee11-8179-000d3adf6334" data-entity="ccp_vrijstellingcode" data-name="A2"></tr>
<tr data-id="52689d1e-1189-ee11-8179-0022489a0604" data-entity="ccp_vrijstellingcode" data-name="A5"></tr>
<tr data-id="0bd31822-1189-ee11-8179-0022489f9d46" data-entity="ccp_vrijstellingcode" data-name="X2"></tr>
</tbody>
</table>
</div>I have tried to use the getElementsByClassName()