Bookmark and Share

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>
    <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>
  <tbody id="planetData">
      <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>

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 style="text-align:center">
        <a href="" onclick="return sortTable(1)">Diameter (mi.)</a>

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.