javaScript小案例------js实现动态排序表格效果篇

前端志茗

已于 2022-04-05 21:47:13 修改

阅读量2.3k

点赞数 10

文章标签： javascript

于 2022-04-02 21:27:14 首次发布

本文链接：https://blog.csdn.net/qq_56745273/article/details/123928088

版权

原生js书写动态排序表格

js动态排序表格

js动态排序表格

这一次写一写js动态排序表格，动态排序表格在前端书写后端页面时常见。我觉得平时应该不会常见的，当然这是我个人的理解，勿怪。话不多说，开干！

动态排序表格效果

页面准备

页面浏览：

在这里插入图片描述

动态排序表格需求：

动态排序表格顾名思义就是可以排序，
首先可以看上图，前面都是复选框，第一行表示的是全选框，这些按钮的需求是我点击全选框时，下面的五个复选框同时全部是选中状态；或者是点击下面的复选框时，一个一个点击，五个全部点击显示选中状态，那么全选框就变成选中状态，如果没有全部选中，那么全选框就不显示选中状态。
然后可以看见第一行的各种标题，编号、姓名、年龄、职位。我要做的是当我点击这四个标题中的一个是，它会自动把它所在那一列的内容排序。
最后------让思路变成代码，跑起来吧！！！

HTML：

html，css就不多解释了，直接把代码放上来了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态排序表格</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <table class="table-container">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" name="" id="" class="checkbox">
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>职位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>3</td>
                <td>李同学</td>
                <td>24</td>
                <td>C++程序员</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>5</td>
                <td>张同学</td>
                <td>24</td>
                <td>PHP工程师</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>6</td>
                <td>黄同学</td>
                <td>21</td>
                <td>交互设计师</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>17</td>
                <td>魏同学</td>
                <td>28</td>
                <td>WEB前端</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>22</td>
                <td>边同学</td>
                <td>30</td>
                <td>测试员</td>
            </tr>
        </tbody>
    </table>
    <script src="./index.js"></script>
</body>

</html>

css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.table-container {
    width: 500px;
    text-align: center;
    margin: 100px auto;
}

tr:hover {
    background-color: #f5f7fa;
}

th {
    cursor: pointer;
    line-height: 50px;
}

table {
    border-collapse: collapse;
}

td,
th {
    height: 50px;
    border: 1px solid #ccc;
}

input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

js：

首先是写一个立即执行函数，避免全局变量和函数的冲突.也可以也可以减少闭包的占用内存问题。然后先写一个主函数，方便代码书写，主要是不容易晕（嘿嘿，调侃一下）。
首先是对复选框的有关操作，**点击全选框时，下面的五个复选框同时全部是选中状态；**我是这样想的，首先是全选按钮的事件，要首先获取到全选按钮的dom元素，然后给全选按钮的dom绑定鼠标点击事件，然后获取dom节点的选中状态，input元素中checked表示按钮选中的状态，checked为true就是代表选中状态，为false就是代表未选中状态，然后获取到下面的input的全部dom，然后遍历循环它，给每一项的checked状态都设成刚才获取的dom节点的选中状态。
继续写对复选框的有关操作，**点击下面的复选框时，一个一个点击，五个全部点击显示选中状态，那么全选框就变成选中状态，如果没有全部选中，那么全选框就不显示选中状态。首先是给下面的input注册鼠标点击事件，并且进行事件委托，用来准确的找到复选框进行事件的触发，然后在定义一个代表下面input选中的个数变量，然后遍历input，在里面做判断，如果input被选中，定义选中的复选框的个数的变量就自增，遍历完成后，如果下面input的选中状态等于所有的下面input的个数时，那么全选框就赋值true，表示选中。反之就赋值false，表示未选中，也就是全选框是不选中的状态。
然后开始写标题：编号、姓名、年龄、职位。要做的是当点击这四个标题中的一个是，它会自动把它所在那一列的内容排序。**把这四个标题拆开看，可以看出来编号，年龄是数字，姓名和职位是汉字，所以我们先写数字，先获取到其相对应的th，td的dom
然后循坏遍历th，就是标题。因为全选框是下标为0，所以首先判断是否下标为0，为0就return，什么也不干。然后给th注册鼠标点击事件，在事件里面首先是把tr变为真数组，在进行排序，如果下标是2和4就中文排序的相关方法，是1和3就数字排序的相关方法：

var arr = Array.prototype.slice.call(tr).sort(function(a, b) {     
     if (index === 2 || index === 4) {
          return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML, 'zh');  //中文处理
      } else if (index === 1 || index === 3) {
          return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML; //数字处理
      }
  })

然后插入数据，最后调用一下程序总函数就ok了。

js代码：

(function() {
    var check = document.querySelector('.checkbox'); //获取全选按钮元素
    var tbodyThAll = document.querySelector('tbody'); //获取tbody元素
    var input = tbodyThAll.getElementsByTagName('input'); //获取tboby元素中的所有input元素
    var thead = document.querySelector('thead');
    var ths = thead.querySelectorAll('th'); //获取thead下面的th元素
    var tr = tbodyThAll.querySelectorAll('tr');

    // 程序总函数
    var main = function main() {
        mainEvent();
    }

    // 所有事件函数的绑定
    var mainEvent = function() {
        check.addEventListener('click', onCheckAll);
        tbodyThAll.addEventListener('click', onTbobyAll);
        for (var i = 0; i < ths.length; i++) {
            thClick(ths[i], i);
        }
    }

    // 全选按钮的事件函数的绑定
    var onCheckAll = function() {
        // 获取dom节点的选中状态 checked表示的是按钮是否选中
        var checkStatus = this.checked
            // 循环tboby下面的input元素
        for (var i = 0; i < input.length; i++) {
            // 给每一项input元素的checked值赋值与全选按钮一样，可以显示一样是否选中
            input[i].checked = checkStatus;
        }
    }

    // tboby下面的input事件绑定函数
    var onTbobyAll = function(e) {
        // 事件目标的获取，准确的找到复选框进行事件的触发
        if (e.target.tagName !== 'INPUT') {
            return;
        }
        // 定义一个已经点击选中的复选框的数字
        var indexInput = 0;
        // 遍历input,
        for (var i = 0; i < input.length; i++) {
            // 如果input被选中，indexInput就++
            if (input[i].checked) {
                indexInput++;
            }
        }
        // 当input被选中的个数等于tboby下面所有的input个数时，全选框就选中，反之就是不选中状态
        if (indexInput === input.length) {
            check.checked = true;
        } else {
            check.checked = false;
        }
    }

    // 定义th的点击事件
    var thClick = function(th, index) {
        if (index === 0) {
            return;
        }
        th.addEventListener('click', function() {
            // 先把tr变为数组,进行排序操作
            var arr = Array.prototype.slice.call(tr).sort(function(a, b) {
                // 中文处理
                if (index === 2 || index === 4) {
                    return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML, 'zh');
                } else if (index === 1 || index === 3) {
                    return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML; //数字处理
                }
            })

            // 插入数据
            for (var i = 0; i < arr.length; i++) {
                tbodyThAll.appendChild(arr[i]);
            }
        })

    }
    main(); //程序总函数的调用
})()