通过下拉选择框实现HTML表格精确匹配筛选的问题咨询

解决方法 #

问题核心是原代码使用indexOf做子串模糊匹配，只要单元格内容包含选中值就会命中，只需将匹配逻辑替换为全等匹配即可满足需求，修改后的JS代码如下：

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      // 空值对应ALL选项直接展示，非空时做完全匹配
      if (filter === "" || td.innerHTML.toUpperCase() === filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

修改说明 #

1. 把原有的indexOf模糊匹配逻辑替换为全等运算符===，只有单元格内容和选中值完全一致时才会展示对应行
2. 保留了「ALL」选项的功能：当选中值为空时，所有行都会正常展示
3. 原有大小写不敏感的匹配逻辑保留，不会因为大小写差异导致匹配失败
   如果你的单元格内容存在首尾空格的场景，可以将td.innerHTML.toUpperCase()替换为td.innerHTML.trim().toUpperCase()，避免空格导致匹配失效。

内容的提问来源于stack exchange，提问作者A. Chithrai