js实现查询商品案例


Posted in Javascript onJuly 22, 2020

本文实例为大家分享了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>

 css:

*{
   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;
 }

js:

<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创建行 tr
   var tr = document.createElement('tr'); 
   //已知每个对想的属性名为value,因此可以利用获取对象中值的方式进行赋值 例如:value.id
   tr.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>

实现效果:

js实现查询商品案例

为什么最后需要利用some进行查询:

js实现查询商品案例

js实现查询商品案例

因为利用数组的some方法,查询遍历,只要返回值结果为true便可结束程序,不需要浪费太多的事件,大大加强了办事效率

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
element跨分页操作选择详解
Jun 29 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 #Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 #Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 #Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 #Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 #Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 #Javascript
js实现带积分弹球小游戏
Jul 21 #Javascript
You might like
Home Coffee Roasting
2021/03/03 咖啡文化
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery处理json对象
2014/11/03 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python如何实现内容写在图片上
2018/03/23 Python
Python装饰器知识点补充
2018/05/28 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
高级人员简历的自我评价分享
2013/11/03 职场文书
工作经历证明书范文
2014/11/02 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
亮剑观后感300字
2015/06/05 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python