<html>
<head>
<style>
.sort1
{
color:green;
}
.sort2
{
color:red;
}
.sort3
{
color:blue;
}
</style>
<script type="text/javascript">
function sort(ind)
{
var ele=document.getElementById("tbl1");
var sort= new Array();
for ( var i = 1; row = ele.rows[i]; i++ ) {
row = ele.rows[i];
sort[i]=row.cells[ind].innerText;
}
sort.sort();
for ( var i = 1; row = ele.rows[i]; i++ ) {
row = ele.rows[i];
row.cells[ind].innerText=sort[i-1];
}
}
</script>
</head>
<body>
<input type="radio" onclick=sort(0)>sort1</input>
<input type="radio" onclick=sort(1)>sort2</input>
<input type="radio" onclick=sort(2)>sort3</input>
<table border=2 id="tbl1">
<tr bgcolor="#995133">
<th> column1
</th>
<th>column2
</th>
<th>column3
</th>
</tr>
<tr>
<td class="sort1"> 1
</td>
<td class="sort2">2
</td>
<td class="sort3">3
</td>
</tr>
<tr>
<td class="sort1"> 8
</td>
<td class="sort2">4
</td>
<td class="sort3"> 1
</td>
</tr>
<tr>
<td class="sort1"> 0
</td>
<td class="sort2">5
</td>
<td class="sort3">7
</td>
</tr>
<tr>
<td class="sort1"> 2
</td>
<td class="sort2">3
</td>
<td class="sort3">8
</td>
</tr>
</table>
</body>
</html>
Try This :)