ES6查询商品案例

Posted echol

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6查询商品案例相关的知识，希望对你有一定的参考价值。

案例图

技术图片

 

 

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查询商品案例的主要内容，如果未能解决你的问题，请参考以下文章

2.案例分析

python——mysql京东数据库设计案例（源码）

Mqsql使用Sharding-JDBC案例实战

redis案例 -- 商品拍卖

ElasticSearch学习问题记录——Invalid shift value in prefixCoded bytes (is encoded value really an INT?)(代码片段

各种安装2