Table Sort

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

Accessing Table Cells

Each element in a rows collection represents a TR element. Each of these element nodes has a cells property which is also a collection, representing each of the individual TD or TH elements in that row.

Given this arrangement, accessing an individual table cell becomes almost trivial. Once again, here's the sample 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

The following code will display the contents of each cell, simply by looping through the row and cell collections.

var tableEl = document.getElementById("myTable");
var i, j;

for (i = 0; i < tableEl.rows.length; i++)
  for (j = 0; j < tableEl.rows[i].cells.length; j++)
    alert("rows[" + i + "].cells[" + j + "] = "
      + tableEl.rows[i].cells[j].firstChild.nodeValue);

Show Cells

Note that the rows in a table or table section need not all have the same number of cells. The use of COLSPAN and ROWSPAN attributes on TD and TH tags will affect how many cells appear in each row. Below is an example of such a table.

Sample Table

Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3
	Row 3 Cell 2	Row 3 Cell 3
Row 4 Cell 1	Row 4 Cell 2

Show Cells

The DOM also provides other special properties and methods for various table elements. These can be used to easily create and delete rows and cells or even whole table sections. For a complete description, see the W3C DOM HTML standard recommendation. While you're there, be sure to check out the interfaces for other HTML elements.

Sorting a Table

Now let's look at putting this knowledge to use. Below is a table with data concerning the nine planets of our solar system.

The Planets

Name	Diameter (mi.)	Distance (mi. x 1000000)	Rotation (hrs.)	Period (days)
Mercury	3032	36.0	1407.6	88
Venus	7521	67.2	5832.5	225
Earth	7926	93.0	23.9	365
Mars	4222	141.6	24.6	687
Jupiter	88846	483.8	9.9	4331
Saturn	74897	890.8	10.7	10747
Uranus	31763	1784.8	17.2	30589
Neptune	30775	2793.1	16.1	59800
Pluto	1485	3647.2	153.3	90588

It consists of a THEAD section, for the headers, and a single TBODY section to hold the rows of data. The TBODY tag is given an ID of "planetData" so we can access it, and its rows, directly.

<table border="1">
  <caption style="caption-side:bottom;">The Planets</caption>
  <thead>
    <tr style="vertical-align:bottom">
      <th style="text-align:left">Name</th>
      <th style="text-align:center">Diameter (mi.)</th>
      <th style="text-align:center">Distance<br />(mi. x 1000000)</th>
      <th style="text-align:center">Rotation (hrs.)</th>
      <th style="text-align:center">Period (days)</th>
    </tr>
  </thead>
  <tbody id="planetData">
    <tr>
      <td style="text-align:left">Mercury</td>
      <td style="text-align:right">3032</td>
      <td style="text-align:right">36.0</td>
      <td style="text-align:right">1407.6</td>
      <td style="text-align:right">88</td>
    </tr>
    ...
  </tbody>
</table>

We'll make it so that the user can click on any one of the column headers to sort these rows based on the data in that column. To accomplish this, we'll define a function called sortTable() which will take one argument, the index of the column to sort. Then, we can wrap each column header in an A tag with an onclick event to call this function.

    <tr style="vertical-align:bottom">
      <th style="text-align:left">
        <a href="" onclick="return sortTable(0)">Name</a>
      </th>
      <th style="text-align:center">
        <a href="" onclick="return sortTable(1)">Diameter (mi.)</a>
      </th>
      ...
    </tr>

Before we go into the code for sortTable(), however, let's look at a few other functions we'll use to help out with the sorting task.

Prev | Next