<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type ="text/javascript" >
function sortTable(sTableID,iCol) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i = 0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol));
}
var Fragment = document.createDocumentFragment();
for (var i = 0; i < aTRs.length; i++) {
Fragment.appendChild(aTRs[i]);
}
oTable.appendChild(Fragment);
oTable.sortCol = iCol;
}
function generateCompareTRs(iCol) {
return function comparesTRs(tv1, tv2) {
var sv1 = tv1.cells[iCol ].firstChild.nodeValue;
var sv2 = tv2.cells[iCol ].firstChild.nodeValue;
return sv1.localeCompare(sv2);
}
}
</script>
</head>
<body>
<form id="form1" method ="post" action ="" >
<table border ="1" id ="tblSort" >
<thead >
<tr >
<th onclick ="sortTable('tblSort',0)" style ="cursor :pointer ">Last Name</th>
<th onclick ="sortTable('tblSort',1)" style ="cursor :pointer ">First Name</th>
</tr>
</thead>
<tbody >
<tr><td>Smith</td><td>John</td></tr>
<tr ><td>Johnson</td><td >Betty</td></tr>
<tr ><td >Henderson</td><td >Nathan</td></tr>
<tr><td>Williams</td><td >James</td></tr>
<tr><td>Gilliam</td><td>Michael</td></tr>
<tr><td>Walker</td><td >Matthew</td></tr>
</tbody>
</table>
</form>
</body>
</html>