数据筛选(数据 文字)

效果图 不看样式（没写样式） 看效果就行

数据筛选.html

datachoose.js

let data = [
	{
		id:1,
		pname:'小米',
		price: 1999
	},
	{
		id:2,
		pname:'华为',
		price: 999
	},
	{
		id:3,
		pname:'荣耀',
		price: 3299
	},
	{
		id:4,
		pname:'oppo',
		price: 2899
	},
]
//1 获取相应的元素
let tbody = document.querySelector('tbody')
let search_price = document.querySelector('.search-price')
let start = document.querySelector('.start')
let end = document.querySelector('.end')
let product = document.querySelector('.product')
let search_pro = document.querySelector('.search-pro')
setData(data)


//2 把数据渲染到页面中
function setData(mydata) {
	//渲染前 先清空原来的数据
	tbody.innerHTML = ''
	mydata.forEach(function (value) {
		let tr = document.createElement('tr')
		tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'
		tbody.appendChild(tr)
	})
}

//3 根据价格查询商品
search_price.addEventListener('click', function () {
	let newData = data.filter(function (value) {
		return value.price >= start.value && value.price <= end.value
	})
	setData(newData)
})

//根据商品名称查找商品
//如果查询数组中唯一的元素，用some方法更合适，因为它找到这个元素 就不再继续循环 效率更高
search_pro.addEventListener('click', function () {
	let arr = []
	data.some(function (value) {
		if (value.pname === product.value){
			console.log(value)
			arr.push(value)
			return true //return 后买你必须跟true
		}
	})
	setData(arr)
})

备注：文章来源于bilbil上的学习笔记