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 base64编码实现代码
Dec 02 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python编程羊车门问题代码示例
2017/10/25 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python自定义函数def的应用详解
2020/06/03 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
教师专业自荐书范文
2014/02/10 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python