js中利用数组新增方法操作查询商品案例

html样式

 <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>

css样式

 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;
        }

js样式

// 利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: "小米",
            price: 3999,
        }, {
            id: 2,
            pname: "oppo",
            price: 999,
        }, {
            id: 3,
            pname: "荣耀",
            price: 1299,
        }, {
            id: 4,
            pname: "华为",
            price: 1999,
        }, ];
        

获取相对应的元素

 //获取元素
        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");
        setDate(data);

// 2. 把数据渲染到页面中
        function setDate(mydata) {
            //先清空原来tbody里面的数据
            tbody.innerHTML = "";
            mydata.forEach(function(value) {
                // console.log(value);
                //添加tr
                var tr = document.createElement("tr");
                //往tr里面添加元素
                tr.innerHTML =
                    "<td>" +
                    value.id +
                    "</td><td>" +
                    value.pname +
                    "</td><td>" +
                    value.price +
                    "</td>";
                tbody.appendChild(tr);
            });
        }

// 3. 根据价格查询商品
        // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener("click", function() {
            var newDate = data.filter(function(value) {
                // console.log(value);
                return value.price >= start.value && value.price <= end.value;
            });
            console.log(newDate);
            // 把筛选完之后的对象渲染到页面中
            setDate(newDate);
        });

// 4. 根据商品名称查找商品
        // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高
        search_pro.addEventListener("click", function() {
            var arr = [];
            data.some(function(value) {
                if (value.pname === product.value) {
                    arr.push(value);
                    return true;
                }
            });
            //把拿到的数据渲染到页面中
            setDate(arr);
        });