Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 793
danbae Avatar asked Oct 02 '17 20:10

danbae


People also ask

Which tag is used to group the rows of the table?

The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

Can you wrap a table row in a div?

You should not be doing that... is not a valid HTMl markup... Rows can not be wraped by divs.

Does table tag need to be closed?

Yes, you need to close those tags for your HTML to validate.


Video Answer


1 Answers

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>
like image 116
epascarello Avatar answered Sep 28 '22 23:09

epascarello