<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript查询功能</title> <style> body{ font-family: "微软雅黑"; font-size: 18px; } table { width: 800px; border: 1px solid #000; border-collapse: collapse; margin: 0 auto; } td,th { border: 1px solid #000; text-align: center; } input { width: 70px; } .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> <br><br> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button> </div> <table> <thead> <tr> <th>产品名称</th> <th>价格</th> <th >处理器</th> <th >屏幕</th> <th >相机</th> <th >电池</th> <th >特色功能</th> </tr> </thead> <tbody> </tbody> </table> <script> // 利用新增数组方法操作数据 var data = [ { pname: '华为mateX2', price: 17999, processor:'麒麟9000', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '华为mate40Pro', price: 6599, processor:'麒麟9000', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '华为mate40', price: 4999, processor:'麒麟9000E', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '华为mate30Pro', price: 5499, processor:'麒麟990', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '华为mate30', price: 3599, processor:'麒麟990', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '华为P40Pro', price: 7999, processor:'麒麟990', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '华为P40', price: 3999, processor:'麒麟990', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '荣耀30Pro', price: 3999, processor:'麒麟990', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '华为mate20Pro', price: 1599, processor:'麒麟980', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '小米11Pro', price: 4799, processor:'高通骁龙888', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '小米11', price: 3799, processor:'高通骁龙888', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '小米Mix4', price: 5499, processor:'高通骁龙888', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '红米K40Pro', price: 2999, processor:'高通骁龙888', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: '红米K40', price: 1999, processor:'高通骁龙870', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: 'VivoX60Pro', price: 5499, processor:'高通骁龙888', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: 'VivoX60', price: 3499, processor:'猎户座', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, { pname: 'OPPOReno6Pro', price: '', processor:'高通骁龙888', screen:'', camera:'', Battery:'', CharacteristicFunction:'', }, ]; // 1. 定义和获取元素 var tbody = document.querySelector('tbody');/*定义tbody*/ var search_price = document.querySelector('.search-price');/*定义search-price*/ var processor=document.querySelector('.processor');/*定义处理器*/ var screen=document.querySelector('.screen');/*定义屏幕*/ var camera=document.querySelector('.camera');/*定义相机*/ var Battery=document.querySelector('.Battery');/*定义电池*/ var CharacteristicFunction=document.querySelector('.CharacteristicFunction');/*特色功能*/ var start = document.querySelector('.start'); var end = document.querySelector('.end'); var product = document.querySelector('.product'); setDate(data); // 2. 把数据渲染到页面中 function setDate(mydata) { // 先清空原来tbody 里面的数据 tbody.innerHTML = ''; mydata.forEach(function(value) { /*添加*/ var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.pname +'</td><td>' + value.price+'</td><td>' + value.processor+'</td><td>' + value.screen+'</td><td>' + value.camera+'</td><td>' + value.Battery+'</td><td>' + value.CharacteristicFunction+'</td>' ; tbody.appendChild(tr); }); } // 3. 根据价格查询商品 // 点击按钮,就可以根据商品价格去筛选数组里面的对象 search_price.addEventListener('click', function() { var newDate = data.filter(function(value) { return value.price >= start.value && value.price <= end.value; }); console.log(newDate); // 把筛选完之后的对象渲染到页面中 setDate(newDate); }); // 4.模糊查找---- 根据商品名称查找商品模糊查找 product.addEventListener('keyup', function() { // 把拿到的数据渲染到页面中 var result = data.filter(function(value) { if (value.pname.includes(product.value)) { return value } }) setDate(result); setDate(data.filter(function(value) { if (value.pname.includes(product.value)) { return value } })); }) </script> </body></html>
