js高级商品查询案例-利用数组的新增方法操作数据

最新推荐文章于 2024-04-22 15:28:53 发布

萌少主

最新推荐文章于 2024-04-22 15:28:53 发布

阅读量508

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/miracle_linlei/article/details/124592307

版权

按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>

</div>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

js部分

// 利用新增数组方法操作数据

// data 里面存放的就是我们要渲染到页面上的数据

var data = [{

id: 1,

pname: '小米',

price: 3999

}, {

id: 2,

pname: 'oppo',

price: 999

}, {

id: 3,

pname: '荣耀',

price: 1299

}, {

id: 4,

pname: '华为',

price: 1999

}, ];

// 1.获取元素

var tbody = document.querySelector('tbody')

var start = document.querySelector('.start')

var end = document.querySelector('.end')

var search_price = document.querySelector('.search-price')

var product = document.querySelector('.product')

var search_pro = document.querySelector('.search-pro')

// 2.封装渲染UI结构的函数

function setData(myData) {

// 注意先清空再渲染

tbody.innerHTML = ''

// 遍历数组

myData.forEach(function(value) { // value 是数组的每一项，它是一个对象

// console.log(value);

// // 写法一：insertAdjacentHTML() 直接创建元素并添加元素

// var str = '<tr><td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td></tr>'

// tbody.insertAdjacentHTML('beforeend', str)

// 写法二：先创建元素createElement()，再添加元素appendChild()

var tr = document.createElement('tr')

tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'

tbody.appendChild(tr)

})

}

setData(data) // 页面一刷新就调用一次，防止页面出现空白

// 3.根据价格查询商品筛选商品

search_price.addEventListener('click', function() {

// 我们要根据价格筛选出所有满足条件的商品，所以这里使用 filter() 循环会比较合适

// filter() 返回的是一个新数组

var newData = data.filter(function(value) { // value 是一个对象

// 筛选出比前一个输入框的价格高，比后一个输入框的价格低的商品

return value.price >= start.value && value.price <= end.value

// 因为 return 会返回一个值，所以在外面我们需要声明一个变量来接收返回过来的值。

})

// 将筛选出来的数据渲染到UI结构上

setData(newData)

})

// 4.根据商品名称查询商品

// 如果要查找的元素是数组中唯一的元素，使用some()效率会更高，我们只要找到了匹配的元素就终止代码

search_pro.addEventListener('click', function() {

// 因为我们渲染的是数组，所以这里需要声明一个空数组，将下面挑选出来的value值追加到这新数组里面进行渲染

var arr = []

data.some(function(value) {

// 如果输入的商品名与某个value里面的商品名相同，就把这个value选出来

if (value.pname === product.value) {

// console.log(value);

arr.push(value)

return true // 这里必须写true,表示找到了匹配值终止代码退出循环

// 因为some（）返回的是布尔值，所以return后面必须写布尔值

}

})

// 渲染 UI 结构

setData(arr)

})

// forEach()和filter() 循环使用 return 都不会终止代码，当数组中所有元素都遍历完毕之后才会退出循环。

// some() 使用 return 可以终止代码，当我们找到了一个匹配的元素时，就不再往下寻找，直接退出循环。

// forEach()用来筛选数组，会筛选出所有满足条件的元素，它会遍历数组中的每一个元素；

// 而some()是用来判断某个数组元素是否存在的，只要找到了一个，就会终止代码退出循环，所有some()可能不会遍历数组中的每一个元素。

</script>

    <div class="search">
        按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        // 利用新增数组方法操作数据
        // data 里面存放的就是我们要渲染到页面上的数据
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }, ];

        // 1.获取元素
        var tbody = document.querySelector('tbody')
        var start = document.querySelector('.start')
        var end = document.querySelector('.end')
        var search_price = document.querySelector('.search-price')
        var product = document.querySelector('.product')
        var search_pro = document.querySelector('.search-pro')

        // 2.封装 渲染UI结构 的函数
        function setData(myData) {
            // 注意先清空再渲染
            tbody.innerHTML = ''
                // 遍历数组
            myData.forEach(function(value) { // value 是数组的每一项，它是一个对象
                // console.log(value);

                // // 写法一：insertAdjacentHTML() 直接创建元素并添加元素
                // var str = '<tr><td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td></tr>'
                // tbody.insertAdjacentHTML('beforeend', str)

                // 写法二：先创建元素createElement()，再添加元素appendChild()
                var tr = document.createElement('tr')
                tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'
                tbody.appendChild(tr)
            })
        }
        setData(data) // 页面一刷新就调用一次，防止页面出现空白

        // 3.根据价格查询商品 筛选商品
        search_price.addEventListener('click', function() {
            // 我们要根据价格筛选出所有满足条件的商品，所以这里使用 filter() 循环会比较合适
            // filter() 返回的是一个新数组
            var newData = data.filter(function(value) { // value 是一个对象
                    // 筛选出 比前一个输入框的价格高，比后一个输入框的价格低 的商品
                    return value.price >= start.value && value.price <= end.value
                        // 因为 return 会返回一个值，所以在外面我们需要声明一个变量来接收返回过来的值。
                })
                // 将筛选出来的数据渲染到UI结构上
            setData(newData)
        })

        // 4.根据商品名称查询商品
        // 如果要查找的元素是数组中唯一的元素，使用some()效率会更高，我们只要找到了匹配的元素就终止代码
        search_pro.addEventListener('click', function() {
            // 因为我们渲染的是数组，所以这里需要声明一个空数组，将下面挑选出来的value值追加到这新数组里面进行渲染
            var arr = []
            data.some(function(value) {
                    // 如果输入的商品名与某个value里面的商品名相同，就把这个value选出来
                    if (value.pname === product.value) {
                        // console.log(value);
                        arr.push(value)
                        return true // 这里必须写true,表示找到了匹配值终止代码退出循环
                            // 因为some（）返回的是布尔值，所以return后面必须写布尔值
                    }
                })
                // 渲染 UI 结构
            setData(arr)
        })

        // forEach()和filter() 循环使用 return 都不会终止代码，当数组中所有元素都遍历完毕之后才会退出循环。
        // some() 使用 return 可以终止代码，当我们找到了一个匹配的元素时，就不再往下寻找，直接退出循环。

        // forEach()用来筛选数组，会筛选出所有满足条件的元素，它会遍历数组中的每一个元素；
        // 而some()是用来判断某个数组元素是否存在的，只要找到了一个，就会终止代码退出循环，所有some()可能不会遍历数组中的每一个元素。
    </script>

萌少主

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js高级商品查询案例-利用数组的新增方法操作数据

<div class="search"> 按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="searc...
复制链接

扫一扫