筛选商品案例
时间:2022-07-28
本文章向大家介绍筛选商品案例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
筛选商品案例
案例分析
1. 把数据渲染到页面中 (forEach) 2. 根据价格显示数据 3. 根据商品名称显示数据
实现代码
- 定义数组对象数据
var data = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '荣耀',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}, ];
- 使用forEach遍历数据并渲染到页面中
data.forEach(function(value) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
tbody.appendChild(tr);
});
- 根据价格筛选数据
- 获取到搜索按钮并为其绑定点击事件
- 使用filter将用户输入的价格信息筛选出来
search_price.addEventListener('click', function() { var newDate = data.filter(function(value) { //start.value是开始区间 //end.value是结束的区间 return value.price >= start.value && value.price <= end.value; }); console.log(newDate); });
- 将筛选出来的数据重新渲染到表格中
- 将渲染数据的逻辑封装到一个函数中
- 将筛选之后的数据重新渲染
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); });
function setDate(mydata) { // 先清空原来tbody 里面的数据 tbody.innerHTML = ''; mydata.forEach(function(value) { var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; tbody.appendChild(tr); }); }
- 根据商品名称筛选
- 获取用户输入的商品名称
- 为查询按钮绑定点击事件,将输入的商品名称与这个数据进行筛选
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); })
search_price.addEventListener('click', function() {
});
- 终被捕!5名罗马尼亚黑客因入侵华盛顿政府摄像头被捕
- VUE 入门基础(9)
- 国家级人工智能产业基地落户松江,发布上海首款国产人工智能芯片
- C# 4.0 Optional Parameters 和Named Parameters
- 开源Web服务器GoAhead远程代码执行漏洞 影响数十万物联网设备
- MySpace:开源数据处理Qizmt
- 王劲:承受大风大浪,创业要忍人所不能忍
- 这枚三拼被榴莲卖了 众安科技收入囊中
- SQL Server数据库碎片
- FPGA、DSP、ARM比较
- 物联网弊端:奥地利旅馆被入侵后的反思
- Web 部署工具 1.0
- “AI+大数据”可提前一周预测传染病
- 依赖注入容器Autofac
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 打卡群刷题总结0724——子集
- 打卡群刷题总结0726——删除排序数组中的重复项 II
- VBA调用外部对象02:FileSystemObject——OpenTextFile参数
- 使用HTTP 404-File Not Found的C2
- MySQL主从复制详解
- Excel VBA事件——ActiveX控件
- Excel VBA事件
- VBA调用外部对象02:FileSystemObject——其他函数
- 递归的理解
- Excel VBA事件——Worksheet
- 类模块——接口排序
- 窗体UserForm——命令按钮
- Excel VBA事件——Workbook
- 文件操作——写入
- 追赶 terraform,让基础设施代码化更加容易,pulumi 都做了些什么?