Sorting tables in HTML using javascript

You may have seen those tables out there which are able to sort themselves by clicking on some of their column headers. How do you do that? If you search around you may see that one of the first solutions is the sorttable by Stuart Langridge. Well, it is really good and has quite some features. But according to what I was looking for it lacks two features:

1. The column headers are clickable, but you have no way to know it unless you click on them. This can be solved by simply adding the following few lines to the CSS style file and by using <th> at the column headers:
   
   

   
   table.sortable th {
    cursor:pointer;
   }
   table.sortable th.sorttable_nosort {
     cursor:auto;
   }
   



2. The rows do not show alternated background colors. Solving this one is a bit more tricky and requires a couple of inserts in the javascript file Stuart provides. Part of the code come from this other good example from Joost de Valk. The first modification happens on line 159, just before:
   

   delete row_array;

   
   
   At that point insert the following line:
   

   
   sorttable.alternate(this.sorttable_tbody);
   

   
   
   After that you need to insert the following code around line 254, just before the line saying "/* sort functions":
   
   

   
   alternate: function(tbody) {
     var tableRows = tbody.getElementsByTagName("tr");
     for (var j = 0; j < tableRows.length; j++) {
       // Check if j is even, and apply classes for both possible results
       if ( (j % 2) == 0  ) {
         if ( !(tableRows[j].className.indexOf('odd') == -1) ) {
           tableRows[j].className = tableRows[j].className.replace('odd', 'even');
         }
         else if ( tableRows[j].className.indexOf('even') == -1 ) {
           tableRows[j].className += " even";
         }
       } 
       else {
         if ( !(tableRows[j].className.indexOf('even') == -1) ) {
             tableRows[j].className = tableRows[j].className.replace('even', 'odd');
         } else if ( tableRows[j].className.indexOf('odd') == -1 ) {
             tableRows[j].className += " odd";
         }               
       }
     }
   },
   

   
   
   Then, you might change the background color (or any other aspect of the row) for the even and odd rows by adding some styles in your CSS file. For example:
   

   
   .odd {
     background-color: #ddd;
   }
   .even {
     background-color: #222;
   }
   

   
   

One more tip. For some font types the up and down arrows that are shown in the header when a column is sorted may look small. The rendering can be improved by tweaking the CSS file again. For example:

#sorttable_sortrevind, #sorttable_sortfwdind {
  font-size: 14px;
}