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?
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.
You should not be doing that... is not a valid HTMl markup... Rows can not be wraped by divs.
Yes, you need to close those tags for your HTML to validate.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With