I want to be able to access a subgroup of rows in a html table using a common property assigned to them – let's say I want a pair of rows to disappear using javascript. If it had worked, enclosing those rows with a div and assigning that div to a class would been perfect.
<table><tbody><tr>...</tr>
<div class="hideme_sometimes"><tr>.....</tr><tr>...</tr></div>
<tr>...</tr></tbody></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div.hideme_sometimes").hide();
});
</script>
<tr>
You can have multiple tbody elements which can surround the rows.
document.querySelector("button").addEventListener("click", function(){
this.setAttribute("hidden", true)
document.querySelectorAll("tbody")[1].removeAttribute("hidden")
});
<table>
<thead>
<tr>
<th>foo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
<tbody hidden>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
<button type="button">more</button>