html页面商品查询,查询商品案例.html

最新推荐文章于 2024-12-31 11:51:14 发布

weixin_39805364

最新推荐文章于 2024-12-31 11:51:14 发布

阅读量674

点赞数

文章标签： html页面商品查询

这篇博客详细介绍了如何使用JavaScript实现一个前端商品搜索和价格范围筛选功能。通过创建DOM节点并动态插入表格，实现了商品列表的展示，并且提供了根据价格范围和商品名称进行实时搜索的功能。该示例代码涉及HTML、CSS和JavaScript，展示了前端数据操作和用户交互的基本逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查询商品案例

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.w {

width: 1200px;

margin: 0 auto;

}

.box .search {

width: 1000px;

height: 50px;

line-height: 50px;

margin: 0 auto;

background-color: purple;

}

.box .start,.end,.proname{

width: 200px;

height: 35px;

outline: none;

}

.box .pricesearch,.search_btn {

width: 80px;

height: 35px;

border: 0;

outline: none;

vertical-align: middle;

cursor: pointer;

}

.tablelist {

width: 1100px;

height: 400px;

margin: 0 auto;

padding: 10px 50px;

background-color: pink;

}

.tablelist table {

width: 100%;

border-spacing: 0;

border-collapse: collapse;

}

.tablelist table thead tr {

width: 100%;

height: 30px;

font-size: 16px;

border: 1px solid #ccc;

}

.tablelist table thead tr th {

border: 2px solid #ccc;

}

.tablelist table tbody {

width: 100%;

}

.tablelist table tbody tr {

height: 30px;

}

.tablelist table tbody tr td {

border: 2px solid #ccc;

height: 30px;

line-height: 30px;

text-align: center;

}

价格范围:

搜索

商品名称：

确定

id商品名称价格

var data = [

{id:1,

name:'小米手机',

price:1999

{id:2,

name:'小米手机',

price:3000

{id:3,

name:'小米手机',

price:600

{id:4,

name:'蓝牙耳机',

price:1699

]

var tbody = document.querySelector('tbody');

//遍历数组

data.forEach(function(value,index) {

//创建节点

var tr = '

' + value.id+ '' + value.name+ '' + value.price+ '';

//追加到tbody里面

tbody.insertAdjacentHTML('beforeend',tr);

});

//搜索价格范围

var pricebtn = document.querySelector('.pricesearch');

var start = document.querySelector('.start');

var end = document.querySelector('.end');

pricebtn.addEventListener('click',function() {

//筛选符合条件的

var newArr = data.filter(function(value,index) {

return value.price >= start.value && value.price <= end.value;

})

//将原来的tbody置空

tbody.innerHTML = '';

//遍历结果

newArr.forEach(function(value,index) {

var tr = '

' + value.id + '' + value.name + '' + value.price + '';

tbody.insertAdjacentHTML('beforeend',tr);

})

//根据商品名称查询

var search_btn = document.querySelector('.search_btn');

var proname = document.querySelector('.proname');

search_btn.addEventListener('click',function() {

var arr = []

data.some(function(value,index) {

if(value.name == proname.value) {

arr.push(value);

return true;

}

})

tbody.innerHTML = ''

//渲染页面

arr.forEach(function(value,index) {

var tr = '

' + value.id + '' + value.name + '' + value.price + '';

tbody.insertAdjacentHTML('beforeend',tr);

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史