操作表格数据---array.forEach()与array.some()

最新推荐文章于 2023-02-13 21:22:52 发布

兰兰的风。。。

最新推荐文章于 2023-02-13 21:22:52 发布

阅读量136

点赞数

分类专栏： # js 文章标签： JavaScript 数据筛选表格渲染动态更新事件监听

本文链接：https://blog.csdn.net/pilgrim_121/article/details/113745625

版权

js 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

实现效果：
在这里插入图片描述
代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con_score {
            width: 550px;
            margin: 50px auto;
        }
        
        .con_name {
            width: 550px;
            margin: auto;
        }
        
        table {
            /* 居中显示 */
            width: 500px;
            margin: 10px auto;
            /* 单元格单线 */
            border-collapse: collapse;
            /* 文字居中 */
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        /* 表头的行的高和背景色 */
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>

    <div class="con_score">
        <span>按照价格查询：</span>
        <input type="text" id="start"> -
        <input type="text" id="end">
        <button id="scoreOk">确定</button>
    </div>

    <div class="con_name">
        <span>按照姓名查询：</span>
        <input type="text" id="name">
        <button id="nameOk">确定</button>
    </div>

    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 准备好学生的数据
        var datas = [{
            name: '小明',
            subject: 'js',
            score: 100
        }, {
            name: '小新',
            subject: 'js',
            score: 98
        }, {
            name: '小夏',
            subject: 'js',
            score: 99
        }, {
            name: '小玉',
            subject: 'js',
            score: 88
        }, {
            name: '小猪',
            subject: 'js',
            score: 0
        }];

        var tbody = document.querySelector('tbody');

        setData(datas);

        // 自定义函数为表格渲染数据
        function setData(array) {
            //先清空原来行的数据
            tbody.innerHTML = '';
            array.forEach(function(value) {
                //console.log(value);这里value是数组中的每个对象
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + value.name + '</td><td>' + value.subject + '</td><td>' + value.score + '</td>'
                tbody.appendChild(tr);
            });
        }


        // 1.筛选符合分数区间值的数据
        var ipt_start = document.querySelector('#start');
        var ipt_end = document.querySelector('#end');
        var btn_score = document.querySelector('#scoreOk');
        btn_score.onclick = function() {
            // console.log(ipt_start.value);
            // console.log(ipt_end.value);

            var newArr = datas.filter(function(value) {
                return value.score >= ipt_start.value && value.score <= ipt_end.value;
            });
            console.log(newArr);

            //调用渲染数据方法:传递参数数组newArr
            setData(newArr);
        }


        //2.查找某一个人（唯一）的数据
        var ipt_name = document.querySelector('#name');
        var btn_name = document.querySelector('#nameOk');
        btn_name.addEventListener('click', function() {
            var arr = [];
            //查询数组中唯一的元素，使用some，效率更高（一旦找到，就终止循环）
            datas.some(function(value) {
                //value是数组中的对象
                if (value.name === ipt_name.value) {
                    arr.push(value);
                    return true;
                }
            });
            //调用渲染数据方法:传递参数数组arr
            setData(arr);
        })
    </script>
</body>

</html>

兰兰的风。。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作表格数据---array.forEach()与array.some()

实现效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .con_s
复制链接

扫一扫

专栏目录