数据筛选(数据 文字)

效果图 不看样式(没写样式) 看效果就行

在这里插入图片描述

数据筛选.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上的学习笔记

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值