商品查询案例

最新推荐文章于 2023-08-16 23:12:32 发布

原创最新推荐文章于 2023-08-16 23:12:32 发布 · 492 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

21 篇文章

订阅专栏

一、界面

<!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>
    </body>
    <script>
         var data = [{
            id: 1,
            pname: '小米',
            price: 4500
        }, {
            id: 2,
            pname: 'oppo',
            price: 2600
        }, {
            id: 3,
            pname: '荣耀',
            price: 5600
        }, {
            id: 4,
            pname: '华为',
            price: 5800
        }, ];
    </script>
</html>

二、操作

1. 将数据渲染到页面（使用forEach）

var tbody = document.querySelector("tbody");
function setData(data) {
        tbody.innerHTML = '';
        data.forEach(function(val) {
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>"+val.id+"</td><td>"+val.pname+"</td><td>"+val.price+"</td>";
            tbody.appendChild(tr);
    })
}
setData(data);

2. 根据指定价格区域选定商品（使用filter）

var search_price = document.querySelector(".search-price");
var start = document.querySelector(".start");
var end = document.querySelector(".end");
search_price.addEventListener("click", function() {
    var searchPriceArr = data.filter(function(val) {
        return val.price >= start.value && val.price <= end.value;
    })
    setData(searchPriceArr);
})

3. 按照商品名称进行查询（使用some）

Notice：使用some只要找到指定元素，就不再往后循环。

var search_pro = document.querySelector(".search-pro");
var product = document.querySelector(".product");
search_pro.addEventListener("click", function() {
    var arr = [];
    data.some(function(val) {
        if(val.pname == product.value) {
            arr.push(val);
            return true; //Don't forget!
        }
    })
    setData(arr);
})