javascript实现表格升序降序排列

Posted 2020-09-25 懒先生的夫人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript实现表格升序降序排列相关的知识，希望对你有一定的参考价值。

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>

以上是关于javascript实现表格升序降序排列的主要内容，如果未能解决你的问题，请参考以下文章

如何实现JSP列表升序或者降序

JavaScript对数组对象进行升序排列

SQL语言中的升序,降序,是怎么会事

怎么在EXCEL表格里按年龄排序

Java中对数组升序排列用Arrays.sort( )方法，那降序排列用啥方法？

若依框架实现表格按照属性排序升序或降序