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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现查询商品案例
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <div class="search"> 按照价格查询:<input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索&
-
javascript实现查询商品功能
本文实例为大家分享了javascript实现查询商品功能的具体代码,供大家参考,具体内容如下 这是没有点击查询的主界面图 这是点击名称查询之后 按照价格查询 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript查询功能</title> <style> body{ fon
-
JavaWeb实现简单查询商品功能
本文实例为大家分享了JavaWeb实现简单查询商品功能的具体代码,供大家参考,具体内容如下 CustomerServlet.java package com.subing.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet
-
SSH框架网上商城项目第11战之查询和删除商品功能实现
在第8节我们完成了查询和删除商品类别的功能,那么现在实现查询和删除商品的功能就很好做了,原理和第8节一模一样,只是修改一些参数,比如请求不同的action等.由于查询和删除商品不需要弹出新的UI窗口,所以我们只要完成完成query.jsp中相应的部分以及相应的后台即可. 1. 查询商品功能的实现 查询功能主要在查询框中实现,从上一节可知,查询框用的是一个text:"<input id='ss' name='serach' />",我们通过把普通的文本框转化为查询搜索文本框来
-
JavaScript实现的商品抢购倒计时功能示例
本文实例讲述了JavaScript实现的商品抢购倒计时功能.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>JS抢购倒计时</title> </head> <body> <span id="times" > <SCRIPT LANGUAGE="JavaScript">
-
AngularJS+bootstrap实现动态选择商品功能示例
本文实例讲述了AngularJS+bootstrap实现动态选择商品功能.分享给大家供大家参考,具体如下: 项目中后台一个商品库,新建活动时动态选择所需商品 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
-
MVC+EasyUI+三层新闻网站建立 分页查询数据功能（七）
MVC新闻网站建立,完成分页查询数据功能. 1.在Model里面建立NewInfo(里面存放的是新闻信息的实体信息) 然后在DAL层中建立NewInfoDal (里面存放对新闻信息的操作) 写入分页查询的代码 /// <summary> /// 分页查询 /// </summary> /// <param name="start">分页开始条数</param> /// <param name="end">分
-
JavaScript实现翻页功能(附效果图)
效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值. query是查询的方法名称. 10是总页数 1是当前页数 100是总条数. <%@ page language="java" contentType="text/html;charset=UTF-8" pageEn
-
JS开发中百度地图+城市联动实现实时触发查询地址功能
缘由: 由于项目需要实现一个根据省市区+详细地址的路径进行查询地址的功能. 所用技术:百度地图API+jQuery 实现步骤: 1.省市区三级联动(ps:已经忘记这个小插件的出处的) 引入area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = f
-
JavaScript前端页面搜索功能案例【基于jQuery】
本文实例讲述了JavaScript前端页面搜索功能.分享给大家供大家参考,具体如下: 今天给大家分享一篇关于前端页面搜索的案例,有了这个案例,在表格数据中可以进行快速查找,比在浏览器中使用ctrl+F体验比较好. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面搜索实例</title>
-
Python 制作查询商品历史价格的小工具
一年一度的双十一就快到了,各种砍价.盖楼.挖现金的口令将在未来一个月内充斥朋友圈.微信群中.玩过多次双十一活动的小编表示一顿操作猛如虎,一看结果2毛5.浪费时间不说而且未必得到真正的优惠,双十一电商的"明降暗升"已经是默认的潜规则了.打破这种规则很简单,可以用 Python 写一个定时监控商品价格的小工具. 思路 第一步抓取商品的价格存入 Python 自带的 SQLite 数据库 每天定时抓取商品价格 使用 pyecharts 模块绘制价格折线图,让低价一目了然 抓取京东价格 从商品