js实现表格排序

最新推荐文章于 2023-12-02 19:56:31 发布

秋风_irwin

最新推荐文章于 2023-12-02 19:56:31 发布

阅读量4.9k

点赞数

分类专栏： js基础文章标签： javascript 排序

本文链接：https://blog.csdn.net/blueblueskyhua/article/details/68929578

版权

js基础专栏收录该内容

14 篇文章 2 订阅

订阅专栏

用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>

秋风_irwin

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
js实现表格排序

用js实现表格排序。第一点击以降序排列，第二次点击以升序排列 html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table border="1"> <tr> <
复制链接

扫一扫

专栏目录