表格排序-JavaScript

笔试做到一个表格排序的题，当时没有完全实现，本文记录了用JavavScript进行表格排序的实现过程。

题目

在页面上有如下表格，当点击成绩的时候，所有行数据根据成绩从低到高排序，再点击时成绩则变为从高到低排序。

姓名	性别	成绩
张三	男	77
李四	女	87
王五	未知	50

第一次点击成绩之后：

姓名	性别	成绩
王五	未知	50
张三	男	77
李四	女	87

再次点击成绩之后：

姓名	性别	成绩
李四	女	87
张三	男	77
王五	未知	50

实现代码

html代码部分

<table>
    <thead>
        <tr>  
            <td>姓名</td>  
            <td>性别</td>  
            <td>成绩</td>  
        </tr>  
    </thead>
    <tbody>
        <tr>  
            <td>张三</td>  
            <td>男</td>  
            <td>77</td>  
        </tr>  
        <tr>  
            <td>李四</td>  
            <td>女</td>  
            <td>87</td>  
        </tr>  
        <tr>  
            <td>王五</td>  
            <td>未知</td>  
            <td>50</td>  
        </tr>  
    </tbody>
</table>

CSS代码部分

*{
    padding: 0;
    margin: 0;
}
table{
    border: solid 1px;
    margin: 60px auto;
    width: 600px;
    border-collapse: collapse;    /*为表格设置合并边框模型*/
    cursor: default;    
    /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，default默认光标(通常是一个箭头)*/
}
tr{
    border: solid 1px;
    height: 26px;
}
thead{
  border: solid 1px;
  cursor: pointer;
  /*光标呈现为指示链接的指针(一只手)*/
}
td{
  border: solid 1px;
}

JavaScript代码部分

<script type = "text/javascript">
    window.onload = function(){
        var tHead = document.getElementsByTagName('thead')[0];
        var tBody = document.getElementsByTagName('tbody')[0];
        var tHeadTd = tHead.getElementsByTagName('td');
        var rlen = tBody.rows.length;    // 获取tbody中的行数
        var clen = tBody.rows[0].cells.length;   // 获取tbody中的每行的列数

        var arr = [];
        for(var  i = 0; i < rlen; i ++){
          arr[i] = tBody.rows[i];    // 把tBody中的内容以行的形式放到数组arr中
        }

        var count= 0;    // 记录点击的次数（第一次点击，升序排列；再次点击，降序排列）
        // 当点击“成绩”单元格时
        tHeadTd[2].onclick = function(){
            if(count == 0){
              sortUp(arr,2);
              count = 1;
            }else{
              sortDown(arr,2);
              count = 0;
            }
            var str = "";
            var html = "";

            // 遍历数组arr的每一行
            for(var j = 0; j < arr.length; j ++){
                // 遍历数组arr每一行的长度
                for(var k = 0; k < clen; k ++){
                    // 获取排序后每行每个单元格的内容
                    str += "<td>" + arr[j].children[k].innerText + "</td>";
                }
                // 把每个单元格放到行内，并把每行<tr>赋给html
                html = "<tr>" + str + "</tr>";
                str = "";
            }
            tBody.innerHTML = html;     // 把html内容添加到表格tbody中
        }

        // 数字升序
        function sortUp(arr,n){
            arr.sort(function(a,b){
                return a.children[n].innerText - b.children[n].innerText;  
            });
        }

        // 数字降序
        function sortDown(arr,n){
            arr.sort(function(a,b){
                return b.children[n].innerText - a.children[n].innerText;  
            })
        }
    }
</script>