<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA_Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<style>
*{
margin: 0;
}
.search{
margin: auto;
width: 860px;
height: 25px;
}
table{
margin: auto;
width: 400px;
}
thread tr{
height: 25px;
}
tbody tr{
height: 25px;
}
tr th{
padding: 0;
width: 33.33%;
border: 0.5px black solid;
text-align: center;
}
tr td{
padding: 0;
width: 33.33%;
height: 20px;
border: 0.5px black solid;
text-align: center;
}
</style>
</head>
<body>
<div class="search">
按照价格查询:<input type="text" class="start"> - <input type="text" class="end">
<button class="search-price">搜索</button> 按照商品查询:<input type="text"
class="product"> <button class="search-pro">查询</button>
</div>
<table>
<thread>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thread>
<tbody>
</tbody>
</table>
<script>
var data = [{
id:1,
pname:'小米',
price:3999
},{
id:2,
pname:'oppo',
price:999
},{
id:3,
pname:'荣耀',
price:1299
},{
id:4,
pname:'华为',
price:1999
}];
window.onload = function () {
// 1. 获取相应元素
var tbody = document.querySelector('tbody');
var search_price = document.querySelector('.search-price');
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var product = document.querySelector('.product');
var search_pro = document.querySelector('.search-pro');
setDate(data);
// 2. 把数据渲染到页面中
function setDate(mydata) {
tbody.innerHTML = '';
mydata.forEach(function (qurrentValue) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>'+qurrentValue.id+'</td><td>'+qurrentValue.pname+'</td><td>'+qurrentValue.price+'</td>';
tbody.appendChild(tr);
});
}
// 3. 根据价格查询商品
// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
search_price.addEventListener('click',function () {
var newDate = data.filter(function (qurrentValue) {
return qurrentValue.price >= start.value && qurrentValue.price <= end.value;
});
setDate(newDate);
});
// 4.根据商品名称查找商品
// 如果查询数组中唯一的元素,用 some 方法更合适,因为它找到这个元素,就不再进行循环,效率更高
search_pro.addEventListener('click',function () {
var arr = [];
data.some(function (qurrenValue) {
if(qurrenValue.pname === product.value){
arr.push(qurrenValue);
return true;
}
});
setDate(arr);
})
};
</script>
</body>
</html>
javascript 查询商品
猜你喜欢
转载自blog.csdn.net/weixin_45949073/article/details/107443858
今日推荐
周排行