如何用jQuery实现两个关联表格的联动过滤？

问题分析 #

原来的代码仅对table-a的行做了过滤，没有关联table-b中对应data-resource-id的行，所以无法实现联动；之前出现table-b所有行消失的异常，是因为没正确处理它的显示/隐藏逻辑。

修正后的完整代码 #

<input id="myInput" type="text" placeholder="Search..">

<table id="table-a">
  <tr>
    <td data-resource-id="1">Adam</td>
  </tr>
  <tr>
    <td data-resource-id="2">Bobby</td>
  </tr>
  <tr>
    <td data-resource-id="3">Charlie</td>
  </tr>
</table>

<table id="table-b">
  <tr>
    <td data-resource-id="1">Sandler</td>
  </tr>
  <tr>
    <td data-resource-id="2">Knight</td>
  </tr>
  <tr>
    <td data-resource-id="3">Brown</td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase().trim();
    
    // 重置所有行的显示状态，避免输入清空后残留隐藏
    $("#table-a tr, #table-b tr").show();
    
    // 输入不为空时执行过滤逻辑
    if (value !== "") {
      $("#table-a tr").each(function() {
        var rowText = $(this).text().toLowerCase();
        var resourceId = $(this).find("td").data("resource-id");
        
        // 当前table-a行不匹配关键词时，同步隐藏对应table-b行
        if (rowText.indexOf(value) === -1) {
          $(this).hide();
          $("#table-b tr td[data-resource-id='"+resourceId+"']").parent().hide();
        }
      });
    }
  }); 
});
</script>

代码说明 #

• 统一匹配规则：将输入值转小写并去除空格，避免大小写、空格干扰匹配结果
• 重置显示：每次输入时先显示所有行，确保清空输入后内容能完全恢复
• 联动逻辑：以data-resource-id为关联标识，当table-a的行不匹配关键词时，同时隐藏table-b中对应ID的行；匹配的行则保持显示
• 遍历处理：逐个检查table-a的行，保证每一组关联行的状态同步

注意事项 #

• 确保两个表格的data-resource-id值一一对应，否则联动会失效
• 确认jQuery库已正确引入，可使用CDN链接或本地文件路径

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