在 Html 表中搜索（在 Td 特定子标签中）并隐藏行

Question

我希望只在 H3 标签中搜索表格，而不是 TD 标签。 并且如果找到一个结果，它的TR应该被隐藏-h3是TD下的一个Child标签。

例如：

<tr>
  <td>
    <h3>Hier</h3>
    <div></div>
  </td>
</tr>

<script>
$(document).ready(function(){
        $("#myInput").on("keyup", function() {
            const value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
            console.log(value);
        });
    });
</script>

谢谢你的帮助

Answer 1

您的代码中的主要问题是因为您正在搜索整个tr的文本。 您需要调用find('h3')然后与该元素中的文本进行比较。

另请注意， filter()旨在做到这一点； 过滤一组元素并返回其中的一个子集。 您不应该在其中调用toggle() 。 而是调用hide() ，过滤以查找匹配项，然后show()它们。

 jQuery($ => { $("#search").on('input', e => { const value = $(e.target).val().toLowerCase().trim(); $("table tr").hide() .filter((i, tr) => $(tr).find('h3').text().toLowerCase().indexOf(value) > -1).show(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input type="text" name="search" id="search" /> <table> <tr> <td> <h3>Foo</h3> <div></div> </td> </tr> <tr> <td> <h3>Foo bar</h3> <div></div> </td> </tr> <tr> <td> <h3>Hier</h3> <div></div> </td> </tr> </table>