记录商品查询案例 -凯发k8官方网
<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>idth><th>产品名称th><th>价格th>tr>thead><tbody>tbody>table>
table {width: 400px;border: 1px solid #000;border-collapse: collapse;margin: 0 auto;}td,th {border: 1px solid #000;text-align: center;}input {width: 50px;}.search {width: 600px;margin: 20px auto;}
// 利用新增数组方法操作数据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');setdate(data);// 2. 把数据渲染到页面中function setdate(mydata) {// 先清空原来tbody 里面的数据tbody.innerhtml = '';mydata.foreach(function(value) {// console.log(value);var tr = document.createelement('tr');tr.innerhtml = '' value.id '' value.pname '' value.price '';tbody.appendchild(tr);});}// 3. 根据价格查询商品// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象search_price.addeventlistener('click', function() {// alert(11);var newdate = data.filter(function(value) {return value.price >= start.value && value.price <= end.value;});console.log(newdate);// 把筛选完之后的对象渲染到页面中setdate(newdate);});// 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 }});// 把拿到的数据渲染到页面中setdate(arr);})
总结
- 上一篇： 记录js报错cannot set pro
- 下一篇：