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实现在小方框中浏览大图的代码
Aug 14 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
javascript实现行拖动的方法
May 27 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 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
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
vue 动态创建组件的两种方法
2020/12/31 Vue.js
Python随机读取文件实现实例
2017/05/25 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python实现Flappy Bird源码
2018/12/24 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
金讯Java笔试题目
2013/06/18 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
高中军训感想300字
2014/03/04 职场文书
食品安全标语
2014/06/07 职场文书
企业安全标语
2014/06/07 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2015年暑期见闻
2015/07/14 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
nginx优化的六点方法
2021/03/31 Servers
Python办公自动化之Excel(中)
2021/05/24 Python
python中的None与NULL用法说明
2021/05/25 Python