Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Code to Sort a Table by Column

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</td>
  <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.

Note that the onclick event of each of the top table cells is used to call the sortColunm(n) function, passing the column number to the function. Shown below is the Java Script code block to copy and paste into the head section of your webpage.

<script language="JavaScript">

function sortColunm(column)
{
  column--;

}

</script>

Obviously, this is not the entire code for the sortColunm function. We'll be adding more code to the function, explaining the purpose of each bit of code as we go. In the code shown above, we have decremented (subtracted one) from the column number passed to the function. The reason we do this is because, whereas humans start counting at 1, computers start counting at 0. All this decrementation instruction does is make the example a little more human understandable.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268