js实现表格排序

2017-03-31
阅读量
js

用js实现表格排序。 这里写图片描述 第一点击以降序排列,第二次点击以升序排列 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>学号</th>
            <th>名字</th>
            <th id="sort">成绩</th>
        </tr>
        <tr>
            <td>1002</td>
            <td>小铭</td>
            <td>34</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>小红</td>
            <td>64</td>
        </tr>
        <tr>
            <td>1004</td>
            <td>小黄</td>
            <td>24</td>
        </tr>
        <tr>
            <td>1005</td>
            <td>小米</td>
            <td>53</td>
        </tr>
        <tr>
            <td>1006</td>
            <td>小蒋</td>
            <td>78</td>
        </tr>
        <tr>
            <td>1007</td>
            <td>小捷</td>
            <td>97</td>
        </tr>
        <tr>
            <td>1004</td>
            <td>小邓</td>
            <td>65</td>
        </tr>
    </table>
</body>
</html>    

js代码

<script>
    var sort = document.getElementById('sort');
    var up = true
    sort.onclick = function(){
        var table = document.getElementsByTagName('table')[0];
        var tr = table.getElementsByTagName('tr');
        var array = [];
        for (var i = 1;i < tr.length;i++) {
            array.push(tr[i]);
        }
        if (up) {
            SortUp (array);
            up = false;
        } else {
            SortDown (array);
            up = true;
        }

        for (var i = 0; i < array.length; i++){
            table.appendChild(array[i]);
        }
    }
    function SortUp(array){
        for (var i = 0;i < array.length;i++) {
            for (var j = i + 1;j < array.length;j++) {
                if (array[j] === undefined) {
                    continue;
                }
                if (array[i].getElementsByTagName('td')[2].innerText <= array[j].getElementsByTagName('td')[2].innerText) {
                    var temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                }
            }
        }
    }
    function SortDown(array){
        for (var i = 0;i < array.length;i++) {
            for (var j = i + 1;j < array.length;j++) {
                if (array[j] === undefined) {
                    continue;
                }
                if (array[i].getElementsByTagName('td')[2].innerText >= array[j].getElementsByTagName('td')[2].innerText) {
                    var temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                }
            }
        }
    }
</script>
赞赏

欢迎关注我的公众号,秋风的笔记。

本站总访问量