danbae danbae - 1 year ago 199
HTML Question

group html table rows with enclosing tag

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download