js高级—查询商品案例

  <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-prro">查询</button></div><table><thead><tr><th>id</th><th>产品名称</th><th>价格</th></tr></thead><tbody><!-- <tr><td>1</td><td>小米</td><td>2000</td></tr><tr><td>2</td><td>oppo</td><td>999</td></tr><tr><td>3</td><td>荣耀</td><td>1299</td></tr><tr><td>4</td><td>华为</td><td>1999</td></tr> --></tbody></table>

        *{margin: 0;padding: 0;}body{width: 1000px;margin: 0 auto;}.search{text-align: center;/* margin: 0 auto; */}table{padding-top: 20px;width: 1000px;height: 100px;/* border: 1px solid #ccc; */margin:0 auto ; }th,tr,td{border: 1px solid #ccc;text-align: center;height: 50px;}

  <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');//2.把数据渲染到页面中//forEach()。属于数组中的方法，第一个参数表示为每个元素，第二个参数为每个元素的索引值，第三个参数为整体元素的表达式//为了方便使用渲染函数，需要先调用一次,将商品渲染setDate(data);//应为筛选后也要进行渲染，此时可以将此步设置为封装函数function setDate(mydata){//重新渲染数据的时候，先清空tbody原来的数据tbody.innerHTML = '';mydata.forEach(function(value){//测试// console.log(value);//将每个对象放进tbody中去，需要先给tbody创建行 trvar tr = document.createElement('tr'); //已知每个对想的属性名为value，因此可以利用获取对象中值的方式进行赋值 例如：value.idtr.innerHTML =  '<td>'+value.id +'</td> <td>'+value.pname +'</td> <td>'+value.price +'</td>';tbody.appendChild(tr);   });}//3.利用判断查询商品信息//filter()方法可以用到判断的效果//首先获取相应的元素信息var search_price = document.querySelector('.search-price'); var start = document.querySelector('.start');var end = document.querySelector('.end');search_price.addEventListener('click',function(){// alert(1) //测试//定义一个变量名进行数据接受var newDate = data.filter(function(value){// console.log(value);//返回值：  起始价   <= 价格 <=   最终价return value.price >= start.value && value.price <= end.value;    });//    打印变量名//    console.log(newDate);//测试//将筛选完之后的对象渲染到页面中去//调用渲染函数setDate(newDate);})//4.通过商品名称查询，此处的查询可以利用filter()方法进行书写，也可以利用以下方式书写查找//通过some进行查询，因为some方法查到后直接退出，比较有效率，同时some返回的值为布尔值//首先获取相关元素var product = document.querySelector('.product');//输入var search_pro = document.querySelector('.search-prro'); //查询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);  //此时的  value.price 中的value形参传递的是arr实参对象})</script>