Table SortSee 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
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
<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>
|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
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.
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.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
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.