商品查询（JS）

最新推荐文章于 2024-05-22 14:17:58 发布

Asiabo_Z

最新推荐文章于 2024-05-22 14:17:58 发布

阅读量39

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Asiabo_Z/article/details/134296368

版权

比较简单的一个商品查询的页面

<!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>
        .box {
            width: 800px;
            height: auto;
            margin: 100px auto;
            text-align: center;
            font-family: '华文行楷';
        }

        input {
            width: 50px;
        }

        table {
            margin: 50px auto;
            border: #fff;
            font-family: none;
        }

        tr {
            height: 50px;
        }

        tr th:nth-child(1) {
            width: 100px;
        }

        tr th:nth-child(2) {
            width: 350px;
        }

        tr th:nth-child(3) {
            width: 100px;
        }
        thead tr:nth-child(1){
            background-color: #5BCAD3;
        }
        tbody{
            background-color: #F5FAFE;
        }
        tbody tr:last-child{
            border-bottom-color: #5BCAD3;
        }
        .a1{
            height: 10px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            按照价格查询
            <input type="text" class="p1">
            -
            <input type="text" class="p2">
            <button class="seach">搜索</button>
            按照商品名称查询
            <input type="text" class="n1">
            <button class="query">查询</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>产品名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        var tbody = document.querySelector('tbody');
        var seach = document.querySelector('.seach');
        var query = document.querySelector('.query');
        var price1 = document.querySelector('.p1');
        var price2 = document.querySelector('.p2');
        var name1 = document.querySelector('.n1');

        var productList = [
            {
                id: 1,
                title: "小米10",
                price: "9899",
            },
            {
                id: 2,
                title: "OPPOA52",
                price: "1299",
            },
            {
                id: 3,
                title: "荣耀10",
                price: "1299",
            },
            {
                id: 4,
                title: "华为p20",
                price: "2299",
            },
            {
                id: 5,
                title: "华为p30",
                price: "3999",
            },
            {
                id: 6,
                title: "红米K60",
                price: "2399",
            },
            {
                id: 7,
                title: "红米K60至尊版",
                price: "2599",
            },
            {
                id: 8,
                title: "ROG7",
                price: "4499",
            },
            {
                id: 9,
                title: "华为p60Pro",
                price: "6388",
            }
        ];
        function fun1(a) {
            a.forEach(function (v) {
                tbody.innerHTML += `
                    <tr>
                    <td>${v.id}</td>
                    <td>${v.title}</td>
                    <td>${v.price}</td>
                </tr>    
                `
            })
        }
        fun1(productList)
        seach.onclick = function () {
            tbody.innerHTML = "";
            if (price1.value != '' && price2.value != '') {
                var rel = productList.filter(function (v) {
                    return v.price > price1.value && v.price < price2.value;
                })
                fun1(rel);
            } else {
                fun1(productList)
            }
        }
        query.onclick = function () {
            tbody.innerHTML = "";
            if (name1.value != '') {
                var rel = productList.filter(function (v) {
                    return v.title.includes(name1.value);
                })
                fun1(rel);
            } else {
                fun1(productList)
            }
        }
    </script>
</body>

</html>