案例图
1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="1.css"> <title>Document</title> </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> <!-- <tr> <td>1</td> <td>小米</td> <td>999</td> </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 }, ]; 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'); getData(data); //把数据渲染到页面上 function getData(data) { //x渲染之前先把tbody清空 tbody.innerHTML = ''; data.forEach(function (value) { var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; tbody.appendChild(tr); }); }; //功能1实现，按照商品价格查询商品 search_price.addEventListener('click', function () { var newdata = data.filter(function (value) { console.log(value.price); return value.price >= start.value && value.price <= end.value; }); getData(newdata); }); //功能3，根据商品名称查找商品 //如果查询数组中唯一的元素，可优先考虑some search_pro.addEventListener('click', function () { var arr = []; data.some(function (value) { if (value.pname === product.value) { arr.push(value); return true; } }); getData(arr); }) </script> </body> </html>
1.css
* { margin: 0; padding: 0; } .search { text-align: center; margin-top: 10px; } .search input { height: 20px; 55px; } .search button { height: 25px; 40px; margin: 0 5px; } table { 500px; border: 1px solid #ccc; border-collapse: collapse; text-align: center; margin: 10px auto; } table th, td { border: 1px solid #ccc; }