js实现简单商品查询

html代码（进行简单布局）

<div class="box">
	<!--设置按价格查询输入框-->
	<label for="jg">价格查询：</label><input type="text" id="jg" class="num1"/><span>-</span><input type="text" id="jg" class="num2"/><button class="btn1">搜索</button>
	<!--设置按商品名查询输入框-->
	<label for="sp">按照商品名查询：</label><input type="text" id="sp" class="product"/><button class="btn2">搜索</button>
	<!--设置表格用来显示数据-->
	<table cellspacing="0">
		<thead>
			<tr>
				<th>id</th><th>产品名称</th><th>价格</th>
			</tr>
		</thead>
		<tbody>
				
		</tbody>
	</table>
</div>

css代码

.box{
	text-align: center;
	margin: 20px auto;
}
table{
	margin: 10px auto;	
}
tr{
	width: 100px;
}
th,td{
	width: 250px;
	border: 1px solid #ccc;
	line-height: 40px;
}

js代码

let num1 = document.querySelector(".num1");
let num2 = document.querySelector(".num2");
let btn1 = document.querySelector(".btn1");
let product = document.querySelector(".product");
let btn2 = document.querySelector(".btn2");
let tbody = document.querySelector("tbody");
/*设置初始数据*/
let data = [
	{
		id:1,
		name:"iphone12",
		price:"6299"
	},
	{
		id:2,
		name:"iphoneX",
		price:"4399"
	},
	{
		id:3,
		name:"iphone7",
		price:"2000"
	},
];
setData(data);/*设置初始值*/
function setData(data){
	/*先将tbody的值清空在赋值*/
	tbody.innerHTML="";	
	/*forEach遍历数组*/
	data.forEach(function(value,index,array){
		/*添加一个tr节点*/
		let tr = document.createElement("tr");
		tr.innerHTML = "<td>"+value.id+"</td>"+"<td>"+value.name+"</td>"+"<td>"+value.price+"</td>";
		tbody.appendChild(tr);/*将tr添加到tbody里*/
	})			
}
/*按价格查询，这里使用了箭头函数，也可以写成  btn1.onclick = function(){}*/
btn1.onclick = () =>{
	/*使用filter返回符合条件的值，并作为一个新数组*/
	let newData = data.filter(function(value){
		/*对输入内容进行判断，选择返回的值*/
		if(num1.value==""&&num2.value==""){
			return value;
		}else if(num1.value==""&&num2.value!=""){
			return value.price<=num2.value;
		}else if(num1.value!=""&&num2.value==""){
			return value.price>=num1.value;
		}else if(num1.value!=""&&num2.value!=""){
			return value.price<=num2.value&&value.price>=num1.value;
		}
					
	});
	setData(newData);/*将新数组的值遍历再添加到tbody中*/
}
/*按商品名称查询*/
btn2.onclick = () =>{
	let newData = data.filter(function(value){
		if(product.value == ""){
			return value;
		}else{
			return value.name == product.value;	
		}					
	});
	setData(newData);
}

效果图

默认效果（当输入内容为空时也显示全部）

按价格查询

按商品名查询