javascript实现查询商品功能
更新时间：2021年09月01日 08:33:55 作者：风筱默染
这篇文章主要为大家详细介绍了javascript实现查询商品功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现查询商品功能的具体代码，供大家参考，具体内容如下
这是没有点击查询的主界面图
这是点击名称查询之后
按照价格查询
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript查询功能</title>
<style>
body{
font-family: "微软雅黑";
font-size: 18px;
}
table {
width: 800px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
td,th {
border: 1px solid #000;
text-align: center;
}
input {
width: 70px;
}
.search {
width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="search">
按照价格查询: <input type="text" class="start"> - <input type="text" class="end">
<button class="search-price">搜索</button>
<br><br>
按照商品名称查询: <input type="text" class="product">
<button class="search-pro">查询</button>
</div>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>价格</th>
<th >处理器</th>
<th >屏幕</th>
<th >相机</th>
<th >电池</th>
<th >特色功能</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 利用新增数组方法操作数据
var data = [
{
pname: '华为mateX2',
price: 17999,
processor:'麒麟9000',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '华为mate40Pro',
price: 6599,
processor:'麒麟9000',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '华为mate40',
price: 4999,
processor:'麒麟9000E',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '华为mate30Pro',
price: 5499,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '华为mate30',
price: 3599,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '华为P40Pro',
price: 7999,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '华为P40',
price: 3999,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '荣耀30Pro',
price: 3999,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '华为mate20Pro',
price: 1599,
processor:'麒麟980',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '小米11Pro',
price: 4799,
processor:'高通骁龙888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '小米11',
price: 3799,
processor:'高通骁龙888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '小米Mix4',
price: 5499,
processor:'高通骁龙888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '红米K40Pro',
price: 2999,
processor:'高通骁龙888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '红米K40',
price: 1999,
processor:'高通骁龙870',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'VivoX60Pro',
price: 5499,
processor:'高通骁龙888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'VivoX60',
price: 3499,
processor:'猎户座',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'OPPOReno6Pro',
price: '',
processor:'高通骁龙888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
];
// 1. 定义和获取元素
var tbody = document.querySelector('tbody');/*定义tbody*/
var search_price = document.querySelector('.search-price');/*定义search-price*/
var processor=document.querySelector('.processor');/*定义处理器*/
var screen=document.querySelector('.screen');/*定义屏幕*/
var camera=document.querySelector('.camera');/*定义相机*/
var Battery=document.querySelector('.Battery');/*定义电池*/
var CharacteristicFunction=document.querySelector('.CharacteristicFunction');/*特色功能*/
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var product = document.querySelector('.product');
setDate(data);
// 2. 把数据渲染到页面中
function setDate(mydata) {
// 先清空原来tbody 里面的数据
tbody.innerHTML = '';
mydata.forEach(function(value) { /*添加*/
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.pname +'</td><td>'
+ value.price+'</td><td>'
+ value.processor+'</td><td>'
+ value.screen+'</td><td>'
+ value.camera+'</td><td>'
+ value.Battery+'</td><td>'
+ value.CharacteristicFunction+'</td>'
;
tbody.appendChild(tr);
});
}
// 3. 根据价格查询商品
// 点击按钮,就可以根据商品价格去筛选数组里面的对象
search_price.addEventListener('click', function() {
var newDate = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
});
console.log(newDate);
// 把筛选完之后的对象渲染到页面中
setDate(newDate);
});
// 4.模糊查找---- 根据商品名称查找商品模糊查找
product.addEventListener('keyup', function() {
// 把拿到的数据渲染到页面中
var result = data.filter(function(value) {
if (value.pname.includes(product.value)) {
return value
}
})
setDate(result);
setDate(data.filter(function(value) {
if (value.pname.includes(product.value)) {
return value
}
}));
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Windows下支持自动更新的Electron应用脚手架的方法
这篇文章主要介绍了Windows下支持自动更新的Electron应用脚手架的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
下面小编就为大家带来一篇js接收并转化Java中的数组对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。2010-06-06
javascript 强制刷新页面的代码，大家经常能用的到。2009-12-12
这篇文章主要介绍了5分钟打造简易高效的webpack配置,详细的介绍了打包调试、提取公共代码、压缩、热替换等配置，有兴趣的可以了解一下2017-07-07
最近公司需求做一个微信红包雨功能,这里给大家总结下实现的方法,这篇文章主要给大家介绍了关于uni-app微信小程序之红包雨活动的相关资料,需要的朋友可以参考下2024-01-01
通过JS 获取Mouse Position(鼠标坐标)的代码
最近我发现在webpage中获取空间的绝对坐标时，如果有滚动条就会有错，后来用无名发现的方法得以解决。2009-09-09
这篇文章主要介绍了微信小程序的线程架构，每个小程序包含一个描述整体程序的app实例和多个描述页面的page，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
Google AJAX 搜索 API实现代码，需要的朋友可以参考下。2010-11-11
这篇文章主要介绍了支付宝小程序实现类似微信多行输入功能,输入超过 8 行的时候会出现滚动,这样做的好处就是输入框不会直接顶到页面最顶部,支付宝小程序实现多行输入框：使用textarea多行输入框实现,感兴趣的朋友一起看看吧2024-02-02
最新评论