ES6查詢商品案例

阿新 • • 發佈：2020-08-01

案例圖

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