如何通过下拉选择框选项筛选HTML表格指定行

嘿，我来帮你搞定这个表格筛选的需求！下面是完整的可运行实现，直接套用就能满足你的要求：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>表格年份筛选</title>
    <style>
        /* 可选：给表格加个样式让它更美观 */
        table { border-collapse: collapse; width: 80%; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <!-- 下拉选择框 -->
    <select name="year" id="yearSelector">
        <option value="All">All</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select>

    <!-- 示例表格 -->
    <table id="dataTable">
        <thead>
            <tr>
                <th>序号</th>
                <th>年份</th>
                <th>内容</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2017</td>
                <td>2017年的记录A</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2018</td>
                <td>2018年的记录B</td>
            </tr>
            <tr>
                <td>3</td>
                <td>2017</td>
                <td>2017年的记录C</td>
            </tr>
            <tr>
                <td>4</td>
                <td>2018</td>
                <td>2018年的记录D</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 获取下拉框和表格行元素
        const yearSelector = document.getElementById('yearSelector');
        const tableRows = document.querySelectorAll('#dataTable tbody tr');

        // 绑定change事件，选中年份立即触发筛选
        yearSelector.addEventListener('change', function() {
            const selectedYear = this.value;
            
            // 遍历每一行数据
            tableRows.forEach(row => {
                // 获取第二列（索引为1，DOM索引从0开始）的文本内容
                const rowYear = row.cells[1].textContent.trim();
                
                // 根据选中值控制行的显示/隐藏
                if (selectedYear === 'All' || rowYear === selectedYear) {
                    row.style.display = ''; // 显示行
                } else {
                    row.style.display = 'none'; // 隐藏行
                }
            });
        });
    </script>
</body>
</html>

关键逻辑说明 #

• 实时触发机制：通过监听下拉框的change事件，用户切换选项瞬间就会执行筛选逻辑，无需额外操作
• 筛选规则适配：
  • 选中All时，所有数据行都会被显示
  • 选中具体年份时，只展示第二列文本与选中年份匹配的行
• 灵活调整空间：如果你的表格第二列是2017-03这类带月份的格式，可以把匹配逻辑改成rowYear.includes(selectedYear)，实现包含年份的模糊筛选；也可以根据实际表格结构修改表格ID、列索引等参数

内容的提问来源于stack exchange，提问作者Laishram Pilot