当前位置：首页 > 行业动态 > 正文

html如何做出多重筛选效果

admin
行业动态
2024-03-31
1

要实现多重筛选效果，可以使用HTML、CSS和JavaScript，以下是一个简单的示例：

1、创建一个HTML文件，添加一个表格和一个筛选容器，在筛选容器中，为每个筛选条件添加一个输入框和一个标签。

<!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 >
        <label for="category">类别：</label>
        <input type="text" id="category" placeholder="请输入类别">
    </div>
    <div >
        <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>

2、接下来，创建一个名为script.js的JavaScript文件，编写筛选逻辑，在这个示例中，我们将根据用户输入的类别和价格对表格数据进行筛选。

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(); // 初始化筛选结果
});

这个示例中，我们首先定义了一个包含数据的数组，我们为筛选容器中的输入框添加了事件监听器，当用户输入时，会触发filterData函数。filterData函数会根据用户输入的类别和价格对数据进行筛选，并调用renderTableData函数更新表格内容。