HTML5教程

新人发博第二天 前端--商品查询案例

本文主要是介绍新人发博第二天 前端--商品查询案例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

今天的这个案例 使用到的es5的语法 数组的三个遍历的方法 分别是 forEach filter and some 这个案例是让我好好体会了一下 这三个数组 亦或者是es5语法的魅力 还是遇到了一个小难点的 各位可以在代码中找找 哈哈 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }
        
        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }
        
        input {
            width: 50px;
        }
        
        .search {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <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>
    //   1.动态渲染数据
    var data = [
        {
            id : 1,
            name : 'oppo',
            price : 3999
        },
        {
            id : 2,
            name : '小米',
            price : 999
        },
        {
            id : 3,
            name : '荣耀',
            price : 1299
        },
        {
            id : 4,
            name : '华为',
            price : 6999
        }
    ]
    var tBody = document.querySelector('tbody')
    // 2.1 这个函数下面还要执行一次 干脆封装起来
    function loopArr(arr) {
        // 2.2先清空一下 不然后面重建表格不太好建
        tBody.innerHTML = ''
        arr.forEach(function (value,index) {
        var tr = document.createElement('tr')
        // 2.3下面按照价格查询有个小bug  出来的id 还是原来的 所以不应该取数据里面的id 新表格就应该重新排列 新的id顺序
        var index = index + 1
        tr.innerHTML = '<td>'+ index +'</td><td>'+value.name+'</td><td>'+value.price+'</td>'
        tBody.appendChild(tr)
    })
    }
    loopArr(data)
    // 第二个 版块 按照价格查询
    var search = document.querySelector('.search')
    search.children[2].addEventListener('click', function() {
        var minVal = search.firstElementChild.value
        var maxVal = search.children[1].value
        // console.log(minVal, maxVal);
        var datas = data.filter(function(value) {
            return value.price >= minVal && value.price <= maxVal
        })
        // console.log(datas);
        // 能找到返回成功的数据 数组保存起的 nice 那我就重新对表格来个 分配不就完事了
        // 封装好了函数 再次执行
        loopArr(datas)
    })
    // 3.按照商品名称查询
    search.lastElementChild.addEventListener('click',function() {
        var str = this.previousElementSibling.value
        // console.log(str);
        // 3.1这里我们就比作每个商品名称就只有一种 意思就是名称不太容易重名 所以用数组的some方法 可以更快一点
        var newValue
        data.some(function(value) {
            // 原本打算这么做 但是调试看了一下 死活都不给我true 对上了都视而不见一样 
            /* value = value.name
            return str === value.name */
            if (str == value.name) {
                newValue = value
                return true
            }
        })
        // console.log(newValue);
        // 不建议采用原来数组赋值 应该创建一个新数组 这里只是图快速一点
        if (newValue != undefined) {
            data = [newValue]
            loopArr(data)
        }
    })
    </script>
</body>

</html>

 

这篇关于新人发博第二天 前端--商品查询案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航