码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript实现表格行排序

时间:2016-03-04 16:10:10      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

网站开发中凡是用到表格来展示数据的,往往都要根据某个列来对行排序,下面是我从书上看到的一个行排序例子,看过后受益匪浅,故分享出来。

直接献上完整代码

<!doctype html>
<html lang="en">
<head>
<meta  charset="UTF-8" />
<title>Javascript原生代码实现表格排序</title>
<script type="text/javascript">
//根据指定表格每行第n个单元格的值,对第一个tbody中的行进行排序
//如果存在comparator函数则使用它,否则按字母表顺序比较
function sortRows(table,n,comparator){
    var tbody = table.tBodies[0];
    var rows = tbody.getElementsByTagName("tr");
    rows  = Array.prototype.slice.call(rows,0);//转化为真实数组
    //基于第n个<td>元素的值对行排序
    rows.sort(function(row1,row2){
        var cell1 = row1.getElementsByTagName("td")[n];
        var cell2 = row2.getElementsByTagName("td")[n];
        var val1 = cell1.textContent || cell1.innerText;//IE兼容
        var val2 = cell2.textContent || cell2.innerText;
        if(comparator) return comparator(val1,val2);
        if(val1<val2) return -1;
        else if(val1>val2) return 1;
        else return 0;
    });
    for(var i=0;i<rows.length;i++) tbody.appendChild(rows[i]);  //原先的会自动移除
}

//查找表格的<th>元素(假设只有一行),让它们可单击,以便单击该列对行排序
function makeSortTable(table){
    var headers = table.getElementsByTagName("th");
    for(var i=0;i<headers.length;i++){
        (function(n){ //嵌套函数来创建本地作用域 (这段代码自己也不太懂,自己试过把嵌套函数去掉,但结果出错,希望看懂这段代码的人也教教我)
            headers[i].onclick = function(){sortRows(table,n);};
         }(i));

    }
}

window.onload = function(){
    var table = document.getElementById("table");
    makeSortTable(table);
  }
</script>
<style type="text/css">
table{
    table-layout: auto;
    border-collapse: collapse;
}
th{
    border: solid 1px rgb(0,0,0);
    cursor:pointer;
}
th:hover{
    background: red;
}
td{
    border: solid 1px rgb(0,0,0);
}
</style>
</head>
<body>
<table id="table">
<thead><tr><th>Name</th><th>age</th></tr></thead>
<tr><td>lhm</td><td>24</td></tr>
<tr><td>hyl</td><td>25</td></tr>
<tr><td>hs</td><td>28</td></tr>
<tr><td>cg</td><td>23</td></tr>
<tr><td>yqf</td><td>23</td></tr>
<tr><td>wqz</td><td>38</td></tr>
<tr><td>xf</td><td>45</td></tr>
</table>
</body>
</html>

 

Javascript实现表格行排序

标签:

原文地址:http://www.cnblogs.com/myboke/p/5242331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!