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

本文链接：https://blog.csdn.net/weixin_44790446/article/details/117281891
<!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");
        var product = document.querySelector(".product");
        var search_pro = document.querySelector(".search-pro");
        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);
        });
        //4.根据商品名称查询商品
        //如果查询数组中唯一的元素，用some方法更合适，因为它找到这个元素，就不再进行循环，效率更高
        search_pro.addEventListener("click", function() {
            var arr = [];
            data.some(function(value) {
                if (value.pname === product.value) {
                    // console.log(value);
                    arr.push(value);
                    return true; //return 后面必须为true
                }
            });
            //把拿到的数据渲染到页面中
            setData(arr);
        });
    </script>
</body>

</html>