简单版商品查询效果_一个简易的查询面板,只需要输入id数字,买的东西(包括年货)还藏了点惊喜,-CSDN博客

本文链接：https://blog.csdn.net/Sole_Memory1/article/details/100527505

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table {

width: 400px;

border: 1px solid #000;

border-collapse: collapse;

margin: 0 auto;

}

td,

th {

border: 1px solid #000;

text-align: center;

}

th {

background-color:#fff;

color:#000

}

input {

width: 50px;

}

.search {

width: 600px;

margin: 20px auto;

}

table tr:nth-child(even){

background-color:skyblue;

color:#000

}

table tr:nth-child(odd){

color:#c00;

background-color: royalblue;

}

</style>

</head>

<body>

按照价格查询: <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>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

// 利用新增数组方法操作数据

var data = [{

id: 1,

pname: '小米',

price: 3999

}, {

id: 2,

pname: 'oppo',

price: 999

}, {

id: 3,

pname: '荣耀',

price: 1299

}, {

id: 4,

pname: '华为',

price: 1999

}, ];

// 1. 获取相应的元素

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

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

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

var search_price =document.querySelector('.search-price');

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

var search_pro = document.querySelector('.search-pro');

setDate(data);

//把数据渲染到页面

function setDate(mydata){

tbody.innerHTML = '';

mydata.forEach(function(value){

// console.log(value);

var tr = document.createElement('tr');

tr.innerHTML = '<td>'+ value.id +'</td><td>'+ value.pname +'</td><td>'+ value.price+'</td>';

tbody.appendChild(tr);

});

}

//给搜索添加点击事件

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

// alert('kk')

var newData = data.filter(function(value){

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

})

setDate(newData);

});

//给查询添加点击事件

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

// alert('kk')

var arr = [];

data.some(function(value){

if(value.pname === product.value){

arr.push(value);

return true;

}

})

setDate(arr);

});

</script>

</body>

</html>