Question

Is there a way to handle multiple consecutive table rows (<tr>) as a single DOM object? I have a table whose “logical child” spans for multiple rows (in my particular case, two). When displayed, they are mixed with the other rows, but I want to be able to manipulate (move, delete, hide, etc) those rows as a single DOM object.

Answer 1

Yes, place them in their own <tbody> element.

<table id="my_table">
   <tbody>
       <tr><td> special </td><td> row </td></tr>
       <tr><td> special </td><td> row </td></tr>
   </tbody>

   <tbody>
       <tr><td> normal </td><td> row </td></tr>
       <tr><td> normal </td><td> row </td></tr>
       <tr><td> normal </td><td> row </td></tr>
       <tr><td> normal </td><td> row </td></tr>
       <tr><td> normal </td><td> row </td></tr>
   </tbody>
</table>

---

var table = document.getElementById('my_table');

var special_rows = table.tBodies[0]; // work with just the rows in this tbody
var normal_rows = table.tBodies[1];  // work with the rest