当然可以实现！你之前用的单表过滤逻辑只需要稍微扩展一下，就能覆盖所有目标表格。下面我给你拆解具体的实现思路和代码示例：

核心思路 #

原来的教程代码是通过getElementById获取单个表格，然后只处理这一个表格的行。现在我们只需要：

• 给所有需要过滤的表格添加一个统一的类名（比如filterable-table），方便批量选中
• 在输入事件触发时，遍历所有带这个类的表格，对每个表格重复单表过滤的逻辑

完整实现代码 #

HTML 结构

<!-- 单个输入框 -->
<input type="text" id="myInput" placeholder="输入关键词过滤所有表格..." title="输入搜索内容">

<!-- 多个需要过滤的表格，统一添加filterable-table类 -->
<table class="filterable-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>前端开发</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>后端开发</td>
    </tr>
  </tbody>
</table>

<table class="filterable-table">
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>5999</td>
    </tr>
    <tr>
      <td>无线耳机</td>
      <td>399</td>
    </tr>
  </tbody>
</table>

JavaScript 逻辑

// 获取输入框元素
const input = document.getElementById("myInput");
// 监听输入事件
input.addEventListener("keyup", function() {
  // 获取输入的关键词，转成小写用于不敏感匹配
  const filter = input.value.toLowerCase();
  // 获取所有需要过滤的表格
  const tables = document.querySelectorAll(".filterable-table");

  // 遍历每个表格
  tables.forEach(table => {
    // 获取表格的所有行（tbody里的行，跳过表头）
    const rows = table.querySelectorAll("tbody tr");
    
    // 遍历当前表格的每一行
    rows.forEach(row => {
      // 获取当前行的所有单元格文本内容
      const cells = row.querySelectorAll("td");
      let match = false;

      // 检查当前行的每个单元格是否包含关键词
      cells.forEach(cell => {
        const text = cell.textContent.toLowerCase();
        if (text.includes(filter)) {
          match = true;
        }
      });

      // 根据匹配结果显示/隐藏行
      row.style.display = match ? "" : "none";
    });
  });
});

关键细节说明 #

• 类名统一：用querySelectorAll(".filterable-table")批量选中所有目标表格，比一个个写ID灵活得多
• 表头保留：我们只遍历<tbody>里的行，确保表头（<thead>里的内容）始终显示，不会被过滤掉
• 大小写不敏感：把输入内容和单元格文本都转成小写，避免因为大小写差异导致匹配失败
• 兼容性：这个逻辑和你之前用的单表过滤代码完全兼容，不需要修改原有表格的结构

可选优化 #

如果表格数据很多，输入时频繁触发过滤可能有点卡顿，可以加个防抖函数，比如延迟300ms再执行过滤逻辑，减少不必要的计算：

// 防抖函数
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 把监听事件改成防抖后的函数
input.addEventListener("keyup", debounce(function() {
  // 这里放原来的过滤逻辑
}));

这样就能实现单个输入框统一过滤所有目标表格的效果啦！

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