js查询商品项目案例详解

查询商品案例

要求：

1、把数据渲染到页面中（forEach）

2、根据价格显示数据(filter)

3、根据商品名称显示数据（some）

》》页面html结构如下

<style>
    table {
        width: 400px;
        border: 1px solid #000;
        border-collapse: collapse;
        margin: 0 auto;
    }
    
    tr,
    td,
    th {
        border: 1px solid #000;
        text-align: center;
    }
    
    input {
        width: 50px;
    }
    
    .search {
        width: 600px;
        margin: 20px auto;
    }
</style>

<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>
</body>

效果图：

》》需要被渲染上述页面的数据如下：

 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 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');
    //初始调用渲染数据函数
    setDate(data);
    //2、定义一个函数setDate(mydata)专门用来把数据渲染到页面中，形参mydata接受传递过来的数组
    // 核心：利forEach()方法遍历数组中每一个元素
    function setDate(mydata) {
        //清空原来tbody里面的数据
        tbody.innerHTML = '';
        mydata.forEach(function(item) {
            var tr = document.createElement('tr'); //创建节点
            tr.innerHTML = '<td>' + item.id + '</td><td>' + item.pname + '</td><td>' + item.price + '</td>';
            tbody.appendChild(tr);
        });
    }
    //3、点击查询按钮筛选符合条件的数据并调用setDate()渲染到页面中
    search_price.addEventListener('click', function() {
        // filter()方法用来筛选数组，注意会返回一个新的数组
        var newData = data.filter(function(item) {
            return item.price >= start.value && item.price <= end.value;
        });
        setDate(newData);
    });
    //4、根据商品名称显示数据
    search_pro.addEventListener('click', function() {
        //声明一个新数组newArry用来存放满足条件的对象数据
        var newArry = [];
        //some()方法用来检测是否存在满足指定条件的元素，注意返回必须为布尔值
        data.some(function(item) {
            if (item.pname === product.value) {
                newArry.push(item);
                return true;
            }
        });
        setDate(newArry);
    })