如何整合逻辑到JavaScript函数解决HTML表格搜索匹配异常问题

云原生阿岚

2026-10-5

HTML表格筛选功能修复方案

你修改后搜索第三列无结果，基本是两个常见问题导致的：

测试时使用了固定下标rows[0]，循环遍历所有行时没有替换为循环变量rows[i]
获取到的a标签文本没有和搜索关键词做统一的大小写转换，大小写不一致导致匹配失败

可用实现代码

直接替换原筛选逻辑即可：

// 先获取搜索关键词并统一转大写
const searchInput = document.getElementById('你的搜索输入框ID').value.toUpperCase();
const tableRows = document.getElementById('你的表格ID').getElementsByTagName('tr');

for (let i = 0; i < tableRows.length; i++) {
  // 单独获取第二列（年份列，下标从0开始）的文本，用于年份匹配
  const yearText = tableRows[i].cells[1].textContent.toUpperCase();
  // 第三列仅取a标签文本，排除img的src内容干扰
  let thirdColText = '';
  const aElements = tableRows[i].cells[2].getElementsByTagName('a');
  // 做存在性判断，避免某行无a标签时报错
  if (aElements.length > 0) {
    thirdColText = aElements[0].textContent.toUpperCase();
  }
  // 匹配规则：年份或第三列任意一个匹配就展示该行
  if (yearText.includes(searchInput) || thirdColText.includes(searchInput)) {
    tableRows[i].style.display = '';
  } else {
    tableRows[i].style.display = 'none';
  }
}