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 原型链学习总结
Oct 29 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
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
获取PHP警告错误信息的解决方法
2013/06/03 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python是编译运行的验证方法
2015/01/30 Python
python绘制多个曲线的折线图
2020/03/23 Python
使用python3实现操作串口详解
2019/01/01 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python操作excel让工作自动化
2019/08/09 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
彻底解决Python包下载慢问题
2020/11/15 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
数据库笔试题
2013/05/09 面试题
法学院毕业生求职信
2014/06/25 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
golang 实现并发求和
2021/05/08 Golang
教你用python实现12306余票查询
2021/06/30 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python