新人发博第二天 前端--商品查询案例
今天的这个案例 使用到的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>
