多表格页面实现输入框仅过滤对应关联表格的需求

要实现每个输入框仅过滤其对应的表格，核心是建立输入框与表格的一对一关联，修改如下：

1. 调整HTML结构 #

将每组输入框和表格用容器包裹，确保每组独立区分：

<!-- 第一组：输入框 + 对应表格 -->
<div class="search-table-group">
  <input type="text" class="search-input" placeholder="Search table 1...">
  <table class="tosearch">
    <thead>
      <tr>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 第二组：输入框 + 对应表格 -->
<div class="search-table-group">
  <input type="text" class="search-input" placeholder="Search table 2...">
  <table class="tosearch">
    <thead>
      <tr>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

2. 修改JavaScript逻辑 #

不再全局处理所有表格，而是让每个输入框仅操作自己所在容器内的表格：

document.addEventListener("DOMContentLoaded", function () {
    // 获取所有搜索输入框
    const searchInputs = document.querySelectorAll(".search-input");

    // 为每个输入框绑定输入事件
    searchInputs.forEach(input => {
        input.addEventListener("input", function () {
            const filter = this.value.toLowerCase();
            // 定位当前输入框对应的表格
            const targetTable = this.closest(".search-table-group").querySelector(".tosearch");
            // 仅过滤该表格
            filterTable(targetTable, filter);
        });
    });

    // 表格过滤核心逻辑保持不变
    function filterTable(table, filter) {
        const rows = table.getElementsByTagName("tr");

        for (let i = 1; i < rows.length; i++) {
            const row = rows[i];
            const cells = row.getElementsByTagName("td");
            let shouldShow = false;

            for (let j = 0; j < cells.length; j++) {
                const cell = cells[j];
                const text = cell.textContent.toLowerCase();

                if (text.includes(filter)) {
                    shouldShow = true;
                    break;
                }
            }

            row.style.display = shouldShow ? "" : "none";
        }
    }
});

问题根源与改进说明 #

原代码的问题在于：仅绑定了单个ID为searchInput的输入框，且遍历所有.tosearch表格，导致输入内容会批量过滤全部表格。

修改后逻辑：

• 用类选择器.search-input替代ID，支持多个输入框
• 通过closest(".search-table-group")精准定位当前输入框所在的分组容器，再获取容器内的目标表格
• 每个输入框的过滤操作仅作用于自身关联的表格，实现一对一匹配

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