商品查询案例(2)-利用数组新增方法操作数据filter

最新推荐文章于 2022-09-04 02:51:35 发布

LJ·START

最新推荐文章于 2022-09-04 02:51:35 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： javascript js dom es6

本文链接：https://blog.csdn.net/weixin_44790446/article/details/117281395

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }
        
        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }
        
        input {
            width: 50px;
        }
        
        .search {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="search">
        按照价格查询：<input type="text" class="start" /> -
        <input type="text" class="end" />
        <button class="search-price">搜索</button> 按照商品名称查询：
        <input type="text" class="product" />
        <button class="search-pro">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var data = [{
            ID: 1,
            pname: "小米",
            price: 3999,
        }, {
            ID: 2,
            pname: "OPPO",
            price: 999,
        }, {
            ID: 3,
            pname: "荣耀",
            price: 1299,
        }, {
            ID: 4,
            pname: "华为",
            price: 7899,
        }, ];
        //1.获取相应的元素
        var tbody = document.querySelector("tbody");
        var search_price = document.querySelector(".search-price");
        var start = document.querySelector(".start");
        var end = document.querySelector(".end");
        setData(data);
        //2.把数据渲染到页面中
        function setData(myData) {
            //先清空原来tbody里面的数据
            tbody.innerHTML = "";
            myData.forEach(function(value) {
                // console.log(value);
                var tr = document.createElement("tr");
                tr.innerHTML =
                    "<td>" +
                    value.ID +
                    "</td><td>" +
                    value.pname +
                    "</td><td>" +
                    value.price +
                    "</td>";
                //tr.innerHTML = "<td>1</td><td>2</td><td>3</td>";
                tbody.appendChild(tr);
            });
        }
        //3.根据价格查询商品
        //当我们点击了按钮，就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener("click", function() {
            // alert(11);
            var newData = data.filter(function(value) {
                // console.log(value);
                return value.price >= start.value && value.price <= end.value;
            });
            console.log(newData);
            //把筛选完之后的对象渲染到网页中
            setData(newData);
        });
    </script>
</body>

</html>