如何通过jQuery实现HTML表格中含特定数据行的显示/隐藏切换？

兄弟，我瞅了下你的代码，问题其实很小但特别容易踩坑！核心问题出在事件绑定的时机上，咱们一步步捋清楚：

你把$('#showdog').click()的事件绑定代码写在了$(document).ready()外面！浏览器是从上到下解析代码的，当执行到这段绑定代码时，页面上的<button id="showdog">还没被DOM渲染出来，所以这个点击事件根本没成功绑定到按钮上，自然点击后没反应。

你的初始隐藏逻辑是没问题的，但把事件绑定移到ready内部后，就能完美实现切换效果了。下面是修正后的完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(document).ready(function() {
    // 初始隐藏包含dog的行，同时设置样式
    $("tr:contains(dog)").hide().css({ 
        "background-color": "orange", 
        "color": "black", 
        "border": "1px solid black" 
    });

    // 把点击事件绑定移到ready内部，确保DOM已加载完成后再绑定
    $('#showdog').click(function() {
        $("tr:contains(dog)").toggle();
    });
});
</script>
<button id="showdog">show rec</button>
<table>
  <tr><td>dog</td></tr>
  <tr><td>cat</td></tr>
  <tr><td>mouse</td></tr>
  <tr><td>dog</td></tr>
  <tr><td>dog</td></tr>
  <tr><td>cat</td></tr>
  <tr><td>dog</td></tr>
  <tr><td>rabbit</td></tr>
</table>

关键修改点说明： #

• 将$('#showdog').click()的逻辑完全移入$(document).ready()的回调函数内部，确保所有DOM元素加载完成后再绑定事件，这是最核心的修复点
• 如果你想让代码更易维护，还可以给含“dog”的行提前加个自定义类（比如.dog-row），后续操作直接通过类选择器定位，比用:contains更高效，示例如下：

  // 初始隐藏时添加类标记
  $("tr:contains(dog)").addClass('dog-row').hide().css(/* 样式 */);
  // 点击切换时直接用类选择器操作
  $('.dog-row').toggle();
  

这样修改后，页面加载时含“dog”的行会自动隐藏，点击按钮就能正常触发显示/隐藏的切换效果啦！

内容来源于stack exchange