javascript实现表格升序降序排列的步骤如下：
1，生成表格，并给各列表头添加onclick的排序响应函数
2，取得表格各行的数据，并存入临时数组
3，对该临时数组进行排序
4，利用createDocumentFragment，appendChild方法把排序好的数组转换成表格输出，至此排序完毕。
详细代码如下： 经测试可以直接使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8"/>
<title>TableSorter</title>
<style type="text/css">
body{font-size:12px;line-height:25px;}
tr{height:25px;}
th{font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;border:solid 1px;}
td{font-size:12px;text-align:center;border:solid 1px;}
</style>
</head>
<body>
<table border="0" id="tbl" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th id="th0" onclick = "tablesort(‘tbl‘,0)" >name</th>
<th id="th1" onclick = "tablesort(‘tbl‘,1)" >muscle</th>
<th id="th2" onclick = "tablesort(‘tbl‘,2)" >smart</th>
<th id="th3" onclick = "tablesort(‘tbl‘,3)" >city</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andrew</td>
<td>17</td>
<td>24</td>
<td>武汉</td>
</tr>
<tr>
<td>Jack</td>
<td>13</td>
<td>29</td>
<td>北京</td>
</tr>
<tr>
<td>Zack</td>
<td>7</td>
<td>4</td>
<td>上海</td>
</tr>
<tr>
<td>Bill</td>
<td>37</td>
<td>34</td>
<td>天津</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var Sortcol=-1;
var Sort_flg=[true,true,true,true];
function tablesort(tableid,colidx){
var table=document.getElementById(tableid);
var table_tbody=table.getElementsByTagName("tbody")[0];
var table_tr=table_tbody.getElementsByTagName("tr"); //取得表格的数据行数
//把表格的各行数据存入临时数组，并进行排序
Sortcol = colidx;
var tmp_tr_array=new Array();
for(var cnt=0;cnt<table_tr.length;cnt++){
tmp_tr_array.push(table_tr[cnt]);
}
tmp_tr_array.sort(sortfunc);
//生成一个排好序的文档碎片
var fragment = document.createDocumentFragment();
for(var cnt=0;cnt<tmp_tr_array.length;cnt++){
fragment.appendChild(tmp_tr_array[cnt]); //该方法调用后，页面上的原表格中的此行将消失不见
}
//至此，页面上的原表格只剩下表头
//把排好序的文档碎片接入原表格，排序完毕
table_tbody.appendChild(fragment);
//点击后给表头添加排序的箭头
setCSSforTH(colidx);
}
function setCSSforTH(colidx){
//clear all th style
for(var cnt=0;cnt<4;cnt++){
document.getElementById("th"+cnt).style = "";
}
//add style for clicking th
if(Sort_flg[colidx]){
Sort_flg[colidx]=false;
document.getElementById("th"+colidx).style = "background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg);background-repeat:no-repeat;background-position:right center;";
}else{
Sort_flg[colidx]=true;
document.getElementById("th"+colidx).style = "background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);background-repeat:no-repeat;background-position:right center;";
}
}
function sortfunc(a,b){
var value1 = a.getElementsByTagName("td")[Sortcol].innerHTML;
var value2 = b.getElementsByTagName("td")[Sortcol].innerHTML;
if(Sort_flg[Sortcol]){
//升序排列
if(isNaN(value1)){
return value1.localeCompare(value2); //字符串比较
}else{
return Number(value1)-Number(value2); //数值比较
}
}else{
//降序排列
if(isNaN(value1)){
return value2.localeCompare(value1);
}else{
return Number(value2)-Number(value1);
}
}
}
</script>
</body>
</html>
时间： 2024-10-14 01:45:00