Table Sort

See the demo page for the finished version of the code.

Tables in the DOM

Each element in a table is represented in the document object model just like any other. For each HTML tag (TABLE, CAPTION, THEAD, TBODY, TR, TD, etc.) there is a corresponding DOM element node. Each has the same relationships to other DOM nodes (exposed through properties such as parentNode, firstChild, nextSibling and so on) as any other element node.

However, the DOM also provides some additional properties and methods for different elements in a table that better reflect its tabular nature. These make it easier to programatically access and modify individual rows or cells in a table.

Let's look at some of these. Below is our sample table once again. But this time we add some ID attributes so that we can easily access the corresponding DOM element via document.getElementById().

<table id="myTable" border="1">
  <caption style="caption-side:bottom;">Sample Table</caption>
  <thead id="myTHead">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tfoot id="myTFoot">
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
  <tbody id="myTBody">
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
  </tbody>
</table>

Sample Table

Header 1	Header 2	Header 3
Footer 1	Footer 2	Footer 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3

Using code like that shown below, we can access not only the table element but also each individual table section (head, foot and body). Each of these has a rows property which is a collection of table row elements. You can access the elements in this collection in much the same way as you would elements in an array.

var tableEl = document.getElementById("myTable");
var theadEl = document.getElementById("myTHead");
var tfootEl = document.getElementById("myTFoot");
var tbodyEl = document.getElementById("myTBody");

alert(tableEl.rows.length);
alert(theadEl.rows.length);
alert(tfootEl.rows.length);
alert(tbodyEl.rows.length);

The links below display the number of rows in each of these collections for the sample table above. Note that the head, foot and body sections expose only the rows in those particular groups while the table itself exposes all the rows in the table.

TABLE | THEAD | TFOOT | TBODY

The DOM node for the table element also exposes any head, foot and body elements in the table as properties so the above code could also have been written as follows:

var tableEl = document.getElementById("myTable");

alert(tableEl.rows.length);
alert(tableEl.tHead.rows.length);
alert(tableEl.tFoot.rows.length);
alert(tableEl.tBodies[0].rows.length);  // First and only TBODY element.

A table can only have one THEAD and one TFOOT element but multiple TBODY elements are permitted. So the tBodies property is a collection of TBODY elements. In this case, there is only one TBODY so tBodies is a collection of table section nodes with a single member.

Having table rows represented this way makes them much easier to work with. You can simply access them by index rather than by navigating through the parent, child and sibling node relations.

Additionally, by grouping rows in THEAD, TFOOT and TBODY sections, you can manipulate rows in one section without affecting others or worrying about how many rows they may contain.

Now that we know how to access groups of table rows, we need to see how to access individual cells.

Prev | Next