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