group html table rows with enclosing tag

Question

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>

But obviously you can't put parts of a table inside a div, or a span. Is there some other way of grouping <tr> elements to the same effect?

Answer 1

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>