查询商品案例

1.把数据渲染到页面中（forEach）

2.根据价格显示数据（filter）

3.根据商品名显示数据

效果如下：

代码如下:

html

 <div id="app"><div class="begin">按照价格查询：<input type="text" class="start">-<input type="text" class="end"><input type="button" value="搜索" class="pri">按照商品名称查询：<input type="text" class="product"><input type="button" value="查询" class="pro"></div><div class="end"><table class="tb"><thead><tr><th>id</th><th>产品名称</th><th>价格</th></tr></thead><tbody></tbody></table></div></div>

css

<style>#app{width: 600px;height: 500px;margin: 10px auto;}.begin{padding: 10px;border: 1px solid black;margin-bottom: 20px;}.end{border: 1px solid black;height: 100%;}input{width: 50px;}.tb{width: 95%;border-collapse: collapse;margin: 10px auto;}.tb th{background-color: #0094ff;}.tb th,.tb td{border: 1px solid black;text-align: center;}
</style>

//利用新增数组方法操作数据var list=[{id:1,name:'小米',price:3999},{id:2,name:'oppo',price:999},{id:3,name:'荣耀',price:1299}];//1.获取相应的元素var tbody = document.querySelector('tbody');var pri = document.querySelector(".pri");var start = document.querySelector('.start');var end = document.querySelector('.end');var product = document.querySelector('.product')var pro = document.querySelector('.pro')setList(list)//2.把数据渲染到页面中function setList(mylist){//先清空原来tbody里面的数据tbody.innerHTML=""mylist.forEach(function(value){// console.log(value);var tr = document.createElement("tr");tr.innerHTML = '<td>' + value.id +'</td><td>' + value.name +'</td><td>' + value.price +'</td>'tbody.appendChild(tr);});}//3.根据价格查询商品//当我们点击了按钮，就可以根据我们的商品价格去筛选数组里面的对象。pri.addEventListener('click',function(){// console.log(111)var newList = list.filter(function(value){return value.price >= start.value && value.price <= end.value;});console.log(newList);//把筛选完之后的对象渲染到页面中setList(newList)});//4.根据商品名称查找商品//如果查询数组中唯一的元素，用some方法更合适，因为它找到这个元素，就不在进行循环，效率更高pro.addEventListener('click',function(){var arr = [];list.some(function(value){if(value.name === product.value){// console.log(value);arr.push(value);return true;  //return 必须后面写true}});//把拿到的数据渲染到页面中setList(arr)})

查询商品案例（按价格或名称查询）相关推荐

19.4、Javaweb案例_旅游路线名称查询旅游路线的详情展示
旅游路线名称查询查询参数的传递涉及工具 https://mp.csdn.net/mp_blog/creation/success/128760817 在header.html中 <!-- 头 ...
js高级—查询商品案例
<div class="search">按照价格查询:<input type="text" class="start"&g ...
车辆报价查询接口，通过车系名称查询相关信息
车辆报价查询接口,通过车系名称,查询相关信息. 接口名称:车辆报价查询接口接口平台:接口接口地址:http://op.juhe.cn/onebox/car/query 支持格式:json 请求方式 ...
java城市公交查询系统案例_013JAVA.JSP城市公交查询系统.zip
[实例简介] 本人上传的资源大多是工作学习时的积累, 大部分上传的资源具有源码+论文+答辩PPT+运行视频四部分组成. 仅供学习参考,不得用于商业途径,希望能够帮助到大家,谢谢. [实例截图] [ ...
sql语句查询商品的一二三级分类都是一个字段怎么办_畅购商城(三)：商品管理...
好好学习,天天向上本文已收录至我的Github仓库「DayDayUP」:github.com/RobodLee/DayDayUP,欢迎Star 小练手这里有三个小练手的任务,内容比较简单,就是对一 ...
SQL经典50查询语句案例_4(4、查询姓“李”的老师的个数)
SQL经典50查询语句案例_4: 4.查询姓"李"的老师的个数: SELECT COUNT(Tname) FROM teacher WHERE Tname LIKE '李%' 在M ...
Kotlin实战案例：实现RecyclerView分页查询功能（仿照主流电商APP，可切换列表）
n实战案例:带你实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表和网格效果) 随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Ko ...
淘宝怎么查询商品历史价格信息？item_history_price-获取商品历史价格信息
当你在双十一购物时,你总是觉得价格不便宜吗?事实上,这些都是因为商家的操作,它们先上升,然后下降,给你一种便宜的错觉,因此,小编会给你一种查询商品历史价格的方法,你可以试试. item_history ...
MySQL燕十八老师课程笔记：第六课：商品表的各种按条件查询
老师下了ecshop,我看有弹幕同学说:"可以下,但没必要",我就没下. 查询: #先模拟ecshop建一个小型的商品表 create table goods( goods_id ...

查询商品案例（按价格或名称查询）

查询商品案例

查询商品案例（按价格或名称查询）相关推荐

最新文章

热门文章