<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" class="start">
<input type="text" class="end">
<input type="button" value="点击" class="btn">
<table>
<thead>
<tr>
<td>id</td>
<td>price</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
<script>
var data=[
{
id:1,
price:1000
},
{
id:2,
price:2000
},
{
id:3,
price:2430
},
{
id:4,
price:3999
},
{
id:5,
price:4999
},
]
var tbody=document.querySelector("tbody")
var start=document.querySelector(".start")
var end=document.querySelector(".end")
var btn=document.querySelector(".btn")
//页面渲染
Data(data)
function Data(mydata){
mydata.forEach(function(value){
var tr=document.createElement("tr")
tr.innerHTML="<td>"+value.id+"</td><td>"+value.price+"</td>"
tbody.appendChild(tr)
})
}
//选择
btn.addEventListener("click",function(){
tbody.innerHTML=""
var newdata=data.filter(function(value){
return value.price>=start.value&&value.price<=end.value
})
Data(newdata)
})
</script>
</html>
