如何使用jQuery实现单个搜索框仅检索其下方对应表格？

你的问题核心是当前代码会让所有搜索框操作所有表格的行，我们只需要把搜索范围限定在当前输入框所在的容器内就行。

看你的HTML结构，每个搜索框和对应的表格都包裹在同一个.pbTable div里，这正好可以用来做范围限定。修改后的jQuery代码如下：

$(document).ready(function () {
  $(".searchTable").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    // 找到当前输入框所在的父容器
    var $currentContainer = $(this).closest(".pbTable");
    // 只在这个容器里查找对应的表格行
    $currentContainer.find(".matchTable tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

关键改动说明： #

• $(this).closest(".pbTable"): 从当前输入框出发，向上找到最近的.pbTable容器，这样就锁定了当前输入框对应的表格所在的范围。
• $currentContainer.find(".matchTable tr"): 不再全局搜索所有.matchTable的行，而是只在刚才找到的容器内搜索，这样就保证了每个搜索框只操作自己下方的表格。

你的HTML结构不需要做任何修改，保持原样即可。测试一下就会发现，每个搜索框输入内容时，只会筛选自己对应的表格行，不会影响其他表格了。

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