客户端使用单选按钮对表格进行排序 [英] Client Side Sorting a table using Radio Button
本文介绍了客户端使用单选按钮对表格进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HI Friendz，
在实施此方法时，我面临一些问题.我有一个HTML表和表外的三个单选按钮.单选按钮由表的列名组成.现在检查单选按钮，我必须对表进行相应的排序.
谁能指导我或提供一些示例应用程序来做到这一点
谢谢大家
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
推荐答案
看看本文，了解如何使用jQuery对表进行排序:
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.
<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 :)
这篇关于客户端使用单选按钮对表格进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
