Click here to Skip to main content
15,441,629 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
HI Friendz,
I am facing some problen while implementing this. I have a HTML Table and three radio buttons out side the table. The radio buttons consists of the column names of the table.Now checking the radio buttons i have to sort the table accordingly..

Can anyone guide me or give some sample applications to do this
Thank you all
Posted

Have a look at this article to see how you can sort table using jQuery: Sorting Table Columns with jQuery[^]

Radio button is just an interface to tell the sorting column/field.
 
Share this answer
 
XML
<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 :)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900