查询商品案例 -- 通过ES6方法以及面向对象的思维实现

本文链接：https://blog.csdn.net/qq_52138438/article/details/115402686

查询商品案例 – 通过ES6方法以及面向对象的思维实现
—源自作者看黑马程序员的讲解而做的笔记

<!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>查询商品案例</title>
    <style>
        .search{
            margin: 100px 300px;
        }
        .search input{
            width: 50px;
        }
        table{
            width: 350px;
            margin: -60px 400px;
            border-collapse: collapse;
            text-align: center;
            border:1px solid #000;
        }
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
         tr th{
            border:1px solid #000;
        }
        td{
            border:1px solid #000;
        }
    </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>
    <script>
        //利用新增数组方法操作数据
        var data = [{
            id:1,
            pname:'小米',
            price:3999
        },{
            id:2,
            pname:'oppo',
            price:999
        },{
            id:3,
            pname:'荣耀',
            price:1299
        },{
            id:4,
            pname:'华为',
            price:1999
        }]
        //1.获取对应元素
        var tbody = document.querySelector('tbody')
        var search_price = document.querySelector('.search_price')
        var start = document.querySelector('.start');
        var end = document.querySelector('.end')
        var product = document.querySelector('.product')
        var search_pro = document.querySelector('.search_pro')
        setData(data)//在一开始我们就要把数据渲染到页面上

        //2.把数据渲染到页面中
        function setData(mydata){
            //先清空原来tbody的数据
            tbody.innerHTML = ''
            mydata.forEach(function(value){
            //console.log(value);
            var tr= document.createElement('tr')
            tr.innerHTML = '<td>' + value.id +'</td><td>' + value.pname + '</td><td>' + 
            value.price + '</td>';
            tbody.appendChild(tr)
            });
        }
       

        //3.根据价格查询商品
        //当我们点击了按钮,就可以根据商品的价格去筛选数组里面的对象
        search_price.addEventListener('click',function(){
            // alert(11);
            var newData =  data.filter(function(value){
                return value.price >= start.value && value.price <= end.value
            })
            //filter方法来做到筛选数据的效果，具体使用方法参考文档
            // console.log(newData);
            //把筛选完后的对象渲染到页面中
            setData(newData)
        })

        //4.根据商品名称查找商品
        //如果查询数组中唯一的元素，用some方法更合适,因为它找到这个元素，就不再进行循环，效率更高
        search_pro.addEventListener('click',function(){
            var arr = []
            data.some(function(value){
                if(value.pname == product.value){
                    // console.log(value);
                    arr.push(value)
                    return true;//return 后面必须写true
                }
            })
            //把拿到的数据渲染到页面中
            setData(arr)
        })
    </script>
</body>
</html>