ES6查询商品案例

时间：2020-08-01 21:16:41 阅读：76 评论：0 收藏：0 [点我收藏+]

标签：art function sele 小米 margin dev child utf-8 查找

案例图

技术图片

1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="1.css">
    <title>Document</title>
</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>
            <!-- <tr>
                <td>1</td>
                <td>小米</td>
                <td>999</td>
            </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: 1999
        }, ];
        var tbody = document.querySelector(‘tbody‘);
        var start = document.querySelector(‘.start‘);
        var end = document.querySelector(‘.end‘);
        var search_price = document.querySelector(‘.search_price‘);
        var product = document.querySelector(‘.product‘);
        var search_pro = document.querySelector(‘.search_pro‘);
        getData(data);
        //把数据渲染到页面上
        function getData(data) {
            //x渲染之前先把tbody清空
            tbody.innerHTML = ‘‘;
            data.forEach(function (value) {
                var tr = document.createElement(‘tr‘);
                tr.innerHTML = ‘<td>‘ + value.id + ‘</td><td>‘ + value.pname + ‘</td><td>‘ + value.price +
                    ‘</td>‘;
                tbody.appendChild(tr);
            });
        };
        //功能1实现，按照商品价格查询商品
        search_price.addEventListener(‘click‘, function () {
            var newdata = data.filter(function (value) {
                console.log(value.price);
                return value.price >= start.value && value.price <= end.value;
            });
            getData(newdata);
        });
        //功能3，根据商品名称查找商品
        //如果查询数组中唯一的元素，可优先考虑some
        search_pro.addEventListener(‘click‘, function () {
            var arr = [];
            data.some(function (value) {
                if (value.pname === product.value) {
                    arr.push(value);
                    return true;
                }
            });
            getData(arr);
        })
    </script>
</body>

</html>

1.css

* {
    margin: 0;
    padding: 0;
}

.search {
    text-align: center;
    margin-top: 10px;
}

.search input {
    height: 20px;
    width: 55px;
}

.search button {
    height: 25px;
    width: 40px;
    margin: 0 5px;
}

table {
    width: 500px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    text-align: center;
    margin: 10px auto;
}

table th,
td {
    border: 1px solid #ccc;
}

ES6查询商品案例

标签：art function sele 小米 margin dev child utf-8 查找

原文地址：https://www.cnblogs.com/echol/p/13414915.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行