比较简单的一个商品查询的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: auto;
margin: 100px auto;
text-align: center;
font-family: '华文行楷';
}
input {
width: 50px;
}
table {
margin: 50px auto;
border: #fff;
font-family: none;
}
tr {
height: 50px;
}
tr th:nth-child(1) {
width: 100px;
}
tr th:nth-child(2) {
width: 350px;
}
tr th:nth-child(3) {
width: 100px;
}
thead tr:nth-child(1){
background-color: #5BCAD3;
}
tbody{
background-color: #F5FAFE;
}
tbody tr:last-child{
border-bottom-color: #5BCAD3;
}
.a1{
height: 10px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div>
按照价格查询
<input type="text" class="p1">
-
<input type="text" class="p2">
<button class="seach">搜索</button>
按照商品名称查询
<input type="text" class="n1">
<button class="query">查询</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
var tbody = document.querySelector('tbody');
var seach = document.querySelector('.seach');
var query = document.querySelector('.query');
var price1 = document.querySelector('.p1');
var price2 = document.querySelector('.p2');
var name1 = document.querySelector('.n1');
var productList = [
{
id: 1,
title: "小米10",
price: "9899",
},
{
id: 2,
title: "OPPOA52",
price: "1299",
},
{
id: 3,
title: "荣耀10",
price: "1299",
},
{
id: 4,
title: "华为p20",
price: "2299",
},
{
id: 5,
title: "华为p30",
price: "3999",
},
{
id: 6,
title: "红米K60",
price: "2399",
},
{
id: 7,
title: "红米K60至尊版",
price: "2599",
},
{
id: 8,
title: "ROG7",
price: "4499",
},
{
id: 9,
title: "华为p60Pro",
price: "6388",
}
];
function fun1(a) {
a.forEach(function (v) {
tbody.innerHTML += `
<tr>
<td>${v.id}</td>
<td>${v.title}</td>
<td>${v.price}</td>
</tr>
`
})
}
fun1(productList)
seach.onclick = function () {
tbody.innerHTML = "";
if (price1.value != '' && price2.value != '') {
var rel = productList.filter(function (v) {
return v.price > price1.value && v.price < price2.value;
})
fun1(rel);
} else {
fun1(productList)
}
}
query.onclick = function () {
tbody.innerHTML = "";
if (name1.value != '') {
var rel = productList.filter(function (v) {
return v.title.includes(name1.value);
})
fun1(rel);
} else {
fun1(productList)
}
}
</script>
</body>
</html>