如何修复表格Type下拉筛选功能失效的问题？

数据老陈

2026-7-24

修复表格Type筛选器的列显示问题

你的Type筛选器未生效的核心原因是逻辑方向错误：原代码通过判断行是否包含对应Type的单元格来控制行的显示/隐藏，但你的需求是控制列的显示/隐藏（仅展示选中的Type列+Year列）。以下是修复方案：

修复步骤

1. 调整筛选逻辑核心

保留原有的年份行筛选逻辑，新增列筛选逻辑：

始终保留Year列显示
根据Type筛选器的选中值，控制ASB/ASB 2列的显示状态

2. 替换JavaScript代码

将原script.js的内容替换为以下代码：

const yearSelect = document.getElementById('year-select');
const typeSelect = document.getElementById('type-select');
const tableRows = document.querySelectorAll('tbody tr');
const headerCells = document.querySelectorAll('thead th');

function filterTable() {
  // 处理年份筛选：控制行的显示/隐藏
  tableRows.forEach((row) => {
    const yearCell = row.querySelector('td[data-heading="Year"]');
    const yearFilter = yearSelect.value === 'all' || yearSelect.value === yearCell.textContent;
    row.style.display = yearFilter ? '' : 'none';
  });

  // 处理Type筛选：控制列的显示/隐藏
  const selectedType = typeSelect.value;
  headerCells.forEach((th, index) => {
    const thText = th.textContent.trim();
    // Year列始终显示
    if (thText === 'Year') {
      th.style.display = '';
      tableRows.forEach(row => row.querySelectorAll('td')[index].style.display = '');
      return;
    }
    // 控制ASB系列列的显示
    if (selectedType === 'all' || thText === selectedType) {
      th.style.display = '';
      tableRows.forEach(row => row.querySelectorAll('td')[index].style.display = '');
    } else {
      th.style.display = 'none';
      tableRows.forEach(row => row.querySelectorAll('td')[index].style.display = 'none');
    }
  });
}

yearSelect.addEventListener('change', filterTable);
typeSelect.addEventListener('change', filterTable);

filterTable();