点击按钮-显示相应的筛选效果

喜崽

已于 2023-04-13 20:13:25 修改

阅读量175

点赞数

文章标签： html css javascript

于 2023-04-13 19:57:52 首次发布

本文链接：https://blog.csdn.net/m0_48893127/article/details/130138602

版权

节点对象不能直接进行渲染在页面上。$(选择器)：该方法传入的是选择器，用于获取dom节点，这是自定义的方法。

<!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>
        table {
            width: 600px;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            padding: 5px 10px;
            border: 1px solid #757474;
        }
    </style>
</head>

<body>
    <!-- 点击按钮显示相应的筛选结果 -->
    <button id="btnSort">按照学号排序sort</button>
    <button id="btnFilter">筛选出大于18的学生filter</button>
    <button id="btnSome">是否有不及格的学生some</button>
    <button id="btnEvery">是否所有学生都满18岁every</button>
    <button id="btnMap">把所有学生的年龄加1map</button>
    <button id="btnFind">找出第一个分数大于80的学生find</button>

    <table id="dataSE">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003</td>
                <td>小源</td>
                <td>20</td>
                <td>篮球、足球、乒乓球</td>
                <td>59</td>
            </tr>
            <tr>
                <td>001</td>
                <td>小明</td>
                <td>22</td>
                <td>html、css</td>
                <td>80</td>
            </tr>
            <tr>
                <td>002</td>
                <td>小红</td>
                <td>17</td>
                <td>篮球、乒乓球</td>
                <td>70</td>
            </tr>
            <tr>
                <td>004</td>
                <td>小红</td>
                <td>17</td>
                <td>篮球、乒乓球</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>

    <table id="filterTB">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        // 1.添加点击事件
        $("#btnSort").addEventListener("click", function () {
            ageAdd = 1;
            // 排他思想
            $("#filterTB tbody").innerHTML = "";
            // 获取节点
            let arr = []
            $("#dataSE tbody tr td:nth-child(1)").forEach(function (v) {
                arr.push(v);
            })

            // 筛选
            arr.sort(function (a, b) {
                // console.log(a.textContent,b.textContent);
                return a.textContent - b.textContent;
            });
            console.log(arr);
            // 对后一个表格进行操作
            arr.forEach(function (v) {
                console.log(arr);
                 let node = v.parentNode.innerHTML;
                // console.log(node);
                // console.log(v);
                $("#filterTB tbody").innerHTML += `<tr>${node}</tr>`;
            });

        })
        // 2.点击筛选出大于18岁的学生
        $("#btnFilter").addEventListener("click", function () {
            ageAdd = 1;
            // 排他思想
            $("#filterTB tbody").innerHTML = "";
            //    获取节点
            let arr = []
            $("#dataSE tbody tr td:nth-child(3)").forEach(function (v) {
                arr.push(v);
            });
            // 筛选
            arr = arr.filter(function (v, i, oldArr) {
                // console.log(v.textContent > 18);
                return v.textContent > 18;
            });
            // 找到元素的上一级，并添加新元素
            arr.forEach(function (v) {
                // ageAdd = 1;
                // console.log(v.parentNode)

                let node = v.parentNode.innerHTML;
                console.log(node);
                $("#filterTB tbody").innerHTML += `<tr>${node}</tr>`;
            })


        })

        // 3.是否有不及格的学生some
        $("#btnSome").addEventListener("click", function () {
            ageAdd = 1;
            $("#filterTB tbody").innerHTML = "";
            //    获取节点
            let arr = []
            $("#dataSE tbody tr td:nth-child(5)").forEach(function (v) {
                arr.push(v);
            });
            // 筛选
            let flag = arr.some(function (v, i, oldArr) {
                return v.textContent < 60;
            });
            if (flag) {
                alert("有不及格的学生")
            } else {
                alert("全是及格的学生")
            }

        })

        //4. 是否所有学生都满18岁
        $("#btnEvery").addEventListener("click", function () {
            ageAdd = 1;
            $("#filterTB tbody").innerHTML = "";
            //    获取节点
            let arr = []
            $("#dataSE tbody tr td:nth-child(3)").forEach(function (v) {
                arr.push(v);
            });
            // 筛选
            let flag = arr.every(function (v, i, oldArr) {
                return v.textContent >= 18;
            });
            if (flag) {
                alert("全部都满18岁")
            } else {
                alert("有未满18岁的学生")
            }
        })
        // 5.所有学生年龄+1
        let ageAdd = 1;
        $("#btnMap").addEventListener("click", function () {
            // 排他思想
            $("#filterTB tbody").innerHTML = "";
            //    获取节点
            // 将筛选表格复制上原数据 
            $("#dataSE tbody tr").forEach(function (v) {
                $("#filterTB tbody").innerHTML += `<tr>${v.innerHTML}</tr>`;
            })

            let arr = []
            // 对后一个表格进行操作
            $("#filterTB tbody tr td:nth-child(3)").forEach(function (v) {
                arr.push(v);
            });

            // 筛选

            arr = arr.map(function (v, i, oldArr) {
                v.textContent = Number(v.textContent) + ageAdd;
                return v;
            });
            ageAdd++;
            // 找到元素的上一级，并添加新元素
        });

        // 6.
        $("#btnFind").addEventListener("click", function () {
            ageAdd = 1;
            // 排他思想
            $("#filterTB tbody").innerHTML = "";
            //    获取节点
            let arr = []
            $("#dataSE tbody tr td:nth-child(5)").forEach(function (v) {
                arr.push(v);
            });
            // 筛选
            arr = arr.find(function (v, i, oldArr) {
                // console.log(v.textContent > 18);
                return v.textContent > 80;
            });
            // 找到元素的上一级，并添加新元素


            let node = arr.parentNode.innerHTML;
            // console.log(node);
            $("#filterTB tbody").innerHTML += `<tr>${node}</tr>`;
        })











        function $(selector) {
            let dom = document.querySelectorAll(selector);
            if (dom.length == 0) {
                console.warn("没有获取到节点");
            } else if (dom.length == 1) {
                return dom[0];
            } else if (dom.length > 1) {
                return dom;
            }
        }
    </script>
</body>

</html>