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?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

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>

group html table rows with enclosing tag

Sign up