原生js商品查询代码

Html

Css

div {
	text-align:center;
}
input {
	width:80px;
}
table {
	width:300px;
	text-align:center;

var star = document.querySelector('.star')
var end = document.querySelector('.end')
var searcPrice = document.querySelector('.search-price')
var proName = document.querySelector('.pro-name')
var searchName = document.querySelector('.search-name')
var tbody = document.querySelector('tbody')
var data = [{
        id: 1,
        name: '小米',
        price: 3999
    },
    {
        id: 2,
        name: 'oppo',
        price: 2999
    }, {
        id: 3,
        name: '荣耀',
        price: 1999
    }, {
        id: 4,
        name: '魅族',
        price: 1599
    },
    {
        id: 5,
        name: '中兴',
        price: 999
    },
    {
        id: 6,
        name: '小米10',
        price: 5999
    },
]
// 页面加载完成，调用函数渲染原始数据
setData(data)
// 渲染数据函数
function setData(myData) {
    tbody.innerHTML = ''
    // forEach遍历数组，渲染数据
    myData.forEach((value, index, array) => {
        // 动态创建元素
        var tr = document.createElement('tr')
        tr.innerHTML = '<td>' + value.id + '</td><td > ' + value.name + '</td> <td > ' + value.price + '</td>'
        tbody.appendChild(tr)
    })
}
// 按价格区间查找商品
searcPrice.addEventListener('click', function() {
    var priceArr = data.filter((value) => {
        return value.price >= star.value && value.price <= end.value
    })
    setData(priceArr)

})
// 按商品名字查询商品
searchName.addEventListener('click', function() {
    var nameArr = []
    data.some((value) => {
        if (value.name == proName.value) {
            nameArr.push(value)
            return true
        }
    })
    setData(nameArr)
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js商品查询代码



代码描述：采用es5新增的数组方法，开发的原生js商品查询

更新时间：2020-08-16 21:58:11

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

听说

相关代码

原生js商品查询代码

最新