人员列表的排序和过滤（简易版，代码在最下面）

阿福冲冲冲

已于 2022-10-05 22:40:26 修改

阅读量178

点赞数

分类专栏：福哥手札文章标签： html 前端 css

于 2022-10-05 22:39:37 首次发布

本文链接：https://blog.csdn.net/gongsixing1998/article/details/127177665

版权

福哥手札专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

上图为默认效果，所有人员都显示，按照 id 正序排列
点击男性，只显示男性数据
- 数据可以按照 id 序号 排列
- 数据按照年龄正序排列
- 数据按照年龄倒序排列
点击女性，只显示女性数据
- 按照id序号排列
- 按照年龄正序排列
按照年龄倒序排列

代码如下

<!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>Document</title>
    <style>
        .xin {
            margin: 0 auto;
            width: 800px;
        }

        h2 {
            text-align: center;
        }

        table {
            width: 100%;
            margin: 0 auto;
            border-spacing: 0;
            /* 表格之间的距离*/

        }

        th,
        td,
        tr {
            border: 1px solid #000;
            text-align: center;
        }

        th {
            min-width: 55px;
        }

        td {}

        .filter,
        .classify {

            display: flex;
            justify-content: space-around;
        }


        .filter>span,
        .classify>span {
            margin: 8px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="xin">
        <h2>人员信息表</h2>
        <div class="filter">
            <span>默认</span>
            <span>男性</span>
            <span>女性</span>
        </div>
        <div class="classify">
            <span>序号排列</span>
            <span>年龄正序</span>
            <span>年龄倒序</span>
        </div>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                    <th>gender</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>

    <script>
        let data = [
            {
                id: 0,
                name: '小明',
                age: '45',
                gender: '男'
            },
            {
                id: 1,
                name: '小红',
                age: '23',
                gender: '男'
            },
            {
                id: 2,
                name: '小晶',
                age: '16',
                gender: '女'
            }, {
                id: 3,
                name: '小婷',
                age: '35',
                gender: '女'
            },
            {
                id: 4,
                name: '小虎',
                age: '5',
                gender: '男'
            },
        ]

        let tbody = document.querySelector('tbody')

        let ageSort = document.querySelectorAll('.classify span')
        let genderShow = document.querySelectorAll('.filter span')

        let sortState = 0 // 排序状态 
        let filterState = 0 // 筛选状态

        let render = function () {
            // 根据筛选状态值，过滤不同数据
            let newData = data.filter((item, index) => {
                switch (filterState) {
                    case 0:
                        return true
                    case 1:
                        return item.gender === '男'
                    case 2:
                        return item.gender === "女"
                }
            })

            // 根据排序状态值，来排序数组
            newData.sort((n1, n2) => {
                console.log(n1, n2) // n1:第一个用于比较的元素；n2:第二个用于比较的元素；
                switch (sortState) {
                    case 0:
                        return 1
                    case 1:
                        return n1.age - n2.age
                    case 2:
                        return n2.age - n1.age
                }
            })

            tbody.innerHTML = newData.map((ele) => (
                `
                <tr>
                    <td>${ele.id}</td>
                    <td>${ele.name}</td>
                    <td>${ele.age}</td>
                    <td>${ele.gender}</td>
                </tr>
                `
            )).join('')
        }
        render()

        // 排序
        ageSort.forEach((item, index) => {
            // 元素被点击后，当前点击元素触发箭头函数
            item.onclick = () => {
                sortState = index
                console.log(sortState, filterState)
                render()
            }
        });

        // 筛选
        genderShow.forEach((item, index) => {
            item.onclick = () => {
                filterState = index
                console.log(sortState, filterState)
                render()
            }
        });
    </script>
</body>

</html>