初始化渲染页面
按价格区间搜索对应产品
按商品名称查询商品
<!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> // 利用新增数组方法操作数据 var data = [{ id: 1, pname: '小米', price: 3999 }, { id: 2, pname: 'oppo', price: 999 }, { id: 3, pname: '荣耀', price: 1299 }, { id: 4, pname: '华为', price: 1999 }, ]; // 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 里面的数据 tbody.innerHTML = '' mydata.forEach(function(value){ // console.log(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){ // console.log(value) return value.price >= start.value && value.price <= end.value }) console.log(newData) // 把筛选完之后的对象渲染到页面 setData(newData) }) // 4.根据商品名称查找商品 // 如果查询数组中唯一的元素 用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 //找到了 终止遍历 } }) // 把拿到的数据渲染到页面 setData(arr) }) </script> </body> </html>
