JavaScript学习笔记—查询商品案例

JavaScript学习笔记—查询商品案例

功能:

1. 把数据渲染到页面中
2. 根据价格显示数据
3. 根据商品名称显示数据

JS代码部分:

<script type="text/javascript">
  //利用新增数组方法操作数据
  var data=[{
   id:1,
   pname:'小米',
   price:3999
  },{
   id:2,
   pname:'oppo',
   price:999
  },{
   id:3,
   pname:'华为',
   price:1299
  },{
   id:4,
   pname:'荣耀',
   price:1999
  },{
            id:5,
            pname:'华为',
            price:1666
        }];
  // 1.获取相应的元素
  var tbody=document.querySelector('tbody');
  var search_price=document.querySelector('.search-price');
  var start=document.querySelector('.start');
  var end=document.querySelector('.end');
  var search_pro=document.querySelector('.search-pro');
  var product=document.querySelector('.product');
  // 2.把数据渲染到页面中
  function upload(asd){
   //将tbody中原有的行清空再放上新的内容
   tbody.innerHTML='';
  asd.forEach(function(currentValue,index){
   //创建行
   var tr =document.createElement('tr'); //拿个东西装
   //放入单元格
   tr.innerHTML='<td>'+(index+1)+'</td><td>'+currentValue.pname+'</td><td>'+currentValue.price+'</td>';
   tbody.appendChild(tr);
  });
  };
  upload(data);
 

 // 3.根据价格显示数据
  search_price.addEventListener('click',function(){
   var newData=data.filter(function(value){
    return value.price>=start.value&&value.price<=end.value;
   });
   //获得筛选出来的新数组之后再渲染到页面中
   upload(newData);
  });
  

// 4.根据商品名称显示数据 (法一)
  search_pro.addEventListener('click',function(){
  var anew=data.filter(function(value){
  	return value.pname==product.value;
  });
  upload(anew);
  });
  

如果查询数组中唯一的元素，用some方法更合适，因为他找到这个元素，就不再进行循环，效率更高

// 4.根据商品名称显示数据 (法二)
search_pro.addEventListener('click',function(){
   var arr=[];
   data.some(function(value){
    if(value.pname===product.value){
     arr.push(value);
     return true; //后面必须写true，因为返回true后就不会再循环了
    }
   });
   upload(arr);
  })

---

Learning from pink 老师