1：使用forEach循环渲染数据
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .search { width: 600px; margin: 20px auto; } input { width: 50px; } table { width: 400px; border-collapse: collapse; margin: 0 auto; } td,th { border: 1px solid; border-collapse: collapse; text-align: center; } </style> </head> <body> <div class="search"> 按照价格查询：<input type="text"> - <input type="text"> <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 }, ]; // 获取相应的元素 var tbody = document.querySelector("tbody"); // 把数据渲染到页面中 data.forEach(function(value) { console.log(value.pname); // 开始渲染 var tr = document.createElement('tr'); tr.innerHTML = '<td>'+ value.id +'</td><td>'+ value.pname +'</td><td>'+ value.price +'</td>'; tbody.appendChild(tr); }) </script> </body> </html>
2：根据价格筛选商品
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .search { width: 600px; margin: 20px auto; } input { width: 50px; } table { width: 400px; border-collapse: collapse; margin: 0 auto; } td, th { border: 1px solid; border-collapse: collapse; text-align: center; } </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 }]; // 获取相应的元素 var tbody = document.querySelector("tbody"); // 根据价格筛选商品 // 获取价格区间 var newarr; var search_price = document.querySelector('.search-price'); search_price.onclick = function () { let input_start = document.querySelector(".start"); let input_end = document.querySelector(".end"); let tbody = document.querySelector('tbody'); tbody.innerHTML = ''; newarr = data.filter(function (values) { return values.price >= input_start.value && values.price <= input_end.value; }) console.log(newarr); if (newarr.length == 0) { } else { newarr.forEach(function (value) { var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price; tbody.appendChild(tr); }) } } // 根据商品名称查询 var search_pro = document.querySelector('.search-pro'); search_pro.onclick = function() { let tbody = document.querySelector('tbody'); tbody.innerHTML = ''; var product = document.querySelector('.product'); data.forEach(function(values) { if(product.value == values.pname) { let tr = document.createElement('tr'); tr.innerHTML = '<td>' + values.id + '</td><td>' + values.pname + '</td><td>' + values.price; tbody.appendChild(tr); } }) } </script> </body> </html>
实现效果
