如何实现 HTML 表格的全列模糊搜索（不限定单列）

✅ 核心改进思路

1. 获取整行所有 节点：使用 tr[i].getElementsByTagName("td") 获取 HTMLCollection，再通过扩展运算符 [...tds] 转为数组，便于使用 some() 方法；
2. 使用 some() 进行存在性判断：只要当前行中任一 的文本内容包含搜索关键词（不区分大小写），即视为匹配；
3. 跳过表头行（无 的 tr.header）：通过 !tds.length 安全过滤，避免对 行执行文本匹配；
4. 统一控制显示/隐藏逻辑：匹配成功 → display = ""（恢复默认）；否则 → display = "none"。

✅ 改进后的完整 JavaScript 函数

function myFunction() {
  const input = document.getElementById("myInput");
  const filter = input.value.toUpperCase();
  const table = document.getElementById("myTable");
  const rows = table.getElementsByTagName("tr");

  for (let i = 0; i < rows.length; i++) {
    // 获取当前行所有 td 元素（转为数组便于操作）
    const tds = [...rows[i].getElementsByTagName("td")];

    // 若该行无 td（如表头行），直接显示
    if (!tds.length) {
      rows[i].style.display = "";
      continue;
    }

    // 检查是否存在至少一个 td 包含 filter
    const hasMatch = tds.some(td => {
      const txtValue = td.textContent || td.innerText;
      return txtValue.toUpperCase().includes(filter);
    });

    rows[i].style.display = hasMatch ? "" : "none";
  }
}

? 提示：我们用 String.prototype.includes() 替代了 indexOf() > -1，语义更清晰、可读性更强，且现代浏览器兼容性良好（IE 不支持，如需兼容请回退至 indexOf）。

⚠️ 注意事项与最佳实践

• 性能考量：对于超大表格（如千行以上），频繁 DOM 查询和字符串操作可能影响响应速度。可考虑添加防抖（debounce）机制，例如延迟 300ms 再触发搜索；
• 空值安全：textContent 和 innerText 均做了兜底处理，但若 内含复杂 HTML 或空格/换行较多，建议 .trim() 后再比对；
• 大小写处理一致性：全文统一转为 toUpperCase() 是稳妥做法，也可改用 toLowerCase()，但需确保 filter 与 txtValue 使用相同转换方式；
• 表头保护：原代码中 .header 行不含 ，因此 tds.length === 0 自然跳过匹配逻辑，仅保留显示状态，符合预期；
• 样式重置建议：若表格使用了 CSS :hover 或其他动态样式，隐藏后重新显示时可能需强制重绘（通常无需额外处理，但极端场景下可加 tr[i].offsetHeight 触发回流）。

✅ 总结

通过将单列检索升级为行内多列并行扫描，该方案以极小改动实现了语义更完整的“整表搜索”。它不依赖 jQuery，纯原生 JavaScript 实现，结构清晰、逻辑健壮，适用于绝大多数静态数据表格场景。开发者只需关注 some() 的判定逻辑，即可灵活扩展——例如支持正则匹配、模糊搜索（Levenshtein）、或排除特定列等高级需求。