Easy Code to Sort a Table by Column

By Stephen Bucaro

A Table is a powerful way to present information. You can make your table even more powerful by giving users the ability to sort it by different columns. In this article, I give you some simple Java Script code that you can use to make almost any table sortable by different columns. I'll explain the code in detail so that you can use it and modify it for your own requirements.

The first thing we need is an example table. The table below is a list of stocks showing share price, number of shares, and put/call ratio. Don't put too much value in the actual table contents. The numbers are fictitious, and I personally don't even know what a put/call ratio is.

Click on a column title to sort the table based on that coulumn.

Stock	Price	Shares
Put/Call
Yahoo Inc	23.58	400	4/10
Dell Inc.	25.37	500	4/10
Intel Corp.	21.10	200	5/10
Microsoft Corp	28.44	400	1/10
Sun Microsystems	15.77	500	8/10
Cisco Systems	24.18	250	8/10

I designed the table to have a column that is text strings, a column that is integers, a column that is floats, and a column that is fractions. This should handle almost any kind of data you would want to place in a table.

If you want to use this example code for your own table, I recommend that you first try it with the example table. The html code for the example table is shown below. Cut and paste this code into the body section of your webpage.

<table id="tbl1" border=1>
<tr>
  <td onclick="sortColunm(1)">Stock</td>
  <td onclick="sortColunm(2)">Price</td>
  <td onclick="sortColunm(3)">Shares</tr>
  <td onclick="sortColunm(4)">Put/Call</td>
</tr>
<tr>
  <td>Yahoo Inc</td>
  <td>23.58</td>
  <td>400</td>
  <td>4/10</td>
</tr>
<tr>
  <td>Dell Inc.</td>
  <td>25.37</td>
  <td>500</td>
  <td>4/10</td>
</tr>
<tr>
  <td>Intel Corp.</td>
  <td>21.10</td>
  <td>200</td>
  <td>5/10</td>
</tr>
<tr>
  <td>Microsoft Corp</td>
  <td>28.44</td>
  <td>400</td>
  <td>1/10</td>
</tr>
<tr>
  <td>Sun Microsystems</td>
  <td>15.77</td>
  <td>500</td>
  <td>8/10</td>
</tr>
<tr>
  <td>Cisco Systems</td>
  <td>24.18</td>
  <td>250</td>
  <td>8/10</td>
</tr>
</table>

Note that I gave the table an Id of tbl1. This allows us to use the documents getElementById method to get access to the cells within the table. Note that I did not use a table header section. I've always felt using different tags for the cells in the first row of the table was unnecessary. The example code can be easily modified to work with a table header, but it might be easier to just change the header cells to regular table tags.

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed