如何修改JS代码实现HTML表格多列搜索功能？

原来的代码仅支持搜索表格第一列，要改成全列搜索，只需要调整JS里的单元格匹配逻辑，遍历当前行的所有单元格，只要任意一个单元格匹配关键词就保留该行，否则隐藏。

修改后的完整代码 #

HTML（无需改动）

<input type="text" id="searchInput" onkeyup="tableSearch()" placeholder="Search for something ...">

JavaScript

function tableSearch() {
  var input, filter, table, tr, tds, i, j, txtValue, found;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  
  for (i = 0; i < tr.length; i++) {
    // 初始化匹配标记为false
    found = false;
    // 获取当前行的所有单元格
    tds = tr[i].getElementsByTagName("td");
    // 遍历当前行的每个单元格
    for (j = 0; j < tds.length; j++) {
      txtValue = tds[j].textContent || tds[j].innerText;
      // 如果当前单元格内容匹配关键词，标记为找到并跳出循环
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        found = true;
        break;
      }
    }
    // 根据是否找到匹配项，控制行的显示/隐藏
    tr[i].style.display = found ? "" : "none";
  }
}

关键修改点说明 #

• 新增found变量：用来标记当前行是否存在匹配关键词的单元格
• 替换单列获取为全列集合：把td = tr[i].getElementsByTagName("td")[0];改成获取当前行所有单元格的集合tds = tr[i].getElementsByTagName("td");
• 新增单元格遍历循环：通过内层循环j遍历当前行的每个单元格，检查内容是否匹配
• 优化匹配逻辑：只要找到一个匹配的单元格，就标记found为true并跳出内层循环，提升效率
• 根据found值控制行显示：最后统一判断是否显示当前行，避免重复操作

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