html如何做出多重筛选效果

要实现多重筛选效果，可以使用HTML、CSS和JavaScript，以下是一个简单的示例：,1、创建一个HTML文件，添加一个表格和一个筛选容器，在筛选容器中，为每个筛选条件添加一个输入框和一个标签。,2、接下来，创建一个名为
script.js的JavaScript文件，编写筛选逻辑，在这个示例中，我们将根据用户输入的类别和价格对表格数据进行筛选。,这个示例中，我们首先定义了一个包含数据的数组，我们为筛选容器中的输入框添加了事件监听器，当用户输入时，会触发
filterData函数。
filterData函数会根据用户输入的类别和价格对数据进行筛选，并调用
renderTableData函数更新表格内容。,
,<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF8″> <meta name=”viewport” content=”width=devicewidth, initialscale=1.0″> <title>多重筛选示例</title> <style> .filter { display: flex; marginbottom: 10px; } .filter label { marginright: 10px; } </style> </head> <body> <div class=”filter”> <label for=”category”>类别：</label> <input type=”text” id=”category” placeholder=”请输入类别”> </div> <div class=”filter”> <label for=”price”>价格：</label> <input type=”number” id=”price” placeholder=”请输入价格”> </div> <table id=”dataTable”> <thead> <tr> <th>名称</th> <th>类别</th> <th>价格</th> </tr> </thead> <tbody> <!数据行 > </tbody> </table> <script src=”script.js”></script> </body> </html>,document.addEventListener(‘DOMContentLoaded’, function () { const data = [ { name: ‘商品1’, category: ‘电子产品’, price: 1000 }, { name: ‘商品2’, category: ‘家居用品’, price: 200 }, { name: ‘商品3’, category: ‘电子产品’, price: 3000 }, { name: ‘商品4’, category: ‘家居用品’, price: 500 }, ]; const tableBody = document.querySelector(‘#dataTable tbody’); const categoryInput = document.querySelector(‘#category’); const priceInput = document.querySelector(‘#price’); function renderTableData(filteredData) { tableBody.innerHTML = ”; filteredData.forEach(item => { const row = document.createElement(‘tr’); row.innerHTML = ` <td>${item.name}</td> <td>${item.category}</td> <td>${item.price}</td> `; tableBody.appendChild(row); }); } function filterData() { const category = categoryInput.value.trim(); const price = parseInt(priceInput.value, 10); const filteredData = data.filter(item => { return (!category || item.category === category) && (!price || item.price <= price); }); renderTableData(filteredData); } categoryInput.addEventListener(‘input’, filterData); priceInput.addEventListener(‘input’, filterData); filterData(); // 初始化筛选结果 });,

html如何做出多重筛选效果

相关推荐

热门文章