如何实现仅搜索HTML表格TD下h3内容并隐藏匹配TR行

需要实现HTML表格搜索逻辑，规则如下：

• 仅检索<td>标签下的直接子元素<h3>的文本内容，<td>内其他任意元素的文本都不参与匹配
• 当检索到h3文本和输入的搜索值匹配时，隐藏内容所在的整行<tr>元素
• 原有代码默认读取TR下全量文本做匹配，不符合定向检索h3的要求

核心修改点：

• 放弃使用$(tr).text()获取整行文本的写法，通过直接子选择器定位到td > h3元素，仅读取该元素的文本做匹配
• 调整显隐逻辑，匹配到搜索值时隐藏当前行，未匹配时正常显示
• 自动跳过表头结构，避免表头被误隐藏

修正后的完整代码如下：

<!-- 搜索输入框 -->
<input type="text" id="myInput" placeholder="输入关键词搜索">

<!-- 表格结构示例 -->
<table id="myTable">
  <tr>
    <td>
      <h3>Hier</h3>
      <div>这段div内的文本不会参与检索匹配</div>
    </td>
  </tr>
  <tr>
    <td>
      <h3>Test content</h3>
      <div>其他无关内容</div>
    </td>
  </tr>
</table>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    // 统一转小写做不区分大小写匹配，去除首尾空格减少误判
    const searchValue = $(this).val().toLowerCase().trim();
    $("#myTable tr").each(function() {
      // 仅定位当前tr下，td的直接子元素h3，不获取其他标签内容
      const matchText = $(this).find('> td > h3').text().toLowerCase();
      // 匹配到关键词时隐藏行，未匹配则显示
      const hasMatch = matchText.indexOf(searchValue) > -1;
      $(this).toggle(!hasMatch);
    });
  });
});
</script>

• 选择器> td > h3为直接子选择器语法，只会匹配当前TR下第一层子元素TD的第一层子元素H3，不会匹配TD内嵌套在div、span等其他标签里的h3，完全符合「h3为TD直接子标签」的检索范围要求
• 仅读取目标h3元素的文本内容，TD下其他元素的内容完全不会进入匹配逻辑，不会出现跨标签误匹配的问题
• 若单行存在多个带直接h3子元素的TD，代码会自动拼接所有符合要求的h3文本参与匹配，只要任意一个h3命中关键词就会隐藏整行

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