jQuery 实现 tr 动态显示与隐藏

在网页开发中，常常会遇到需要根据用户操作或特定条件来动态显示与隐藏表格行（tr）的需求。jQuery 作为一款功能强大的 JavaScript 库，为我们提供了便捷的方法来实现这一效果。

确保页面引入了 jQuery 库。可以通过 CDN 或者下载本地文件的方式引入。

实现 tr 动态显示与隐藏的核心在于 jQuery 的显示和隐藏方法。常见的有 show() 和 hide() 方法。例如，有一个表格：

<table id="myTable">
  <tr id="row1">
    <td>第一行内容</td>
  </tr>
  <tr id="row2">
    <td>第二行内容</td>
  </tr>
</table>
<button id="showButton">显示行</button>
<button id="hideButton">隐藏行</button>

通过 jQuery 代码来控制 tr 的显示与隐藏：

$(document).ready(function() {
  $('#hideButton').click(function() {
    $('#row1').hide();
  });
  $('#showButton').click(function() {
    $('#row1').show();
  });
});

上述代码中，当点击 “隐藏行” 按钮时，#row1 这一行会被隐藏；点击 “显示行” 按钮时，这一行又会重新显示。

除了 show() 和 hide()，还有 toggle() 方法。toggle() 方法可以在显示和隐藏状态之间切换。修改代码如下：

$(document).ready(function() {
  $('#toggleButton').click(function() {
    $('#row1').toggle();
  });
});

这样，每次点击按钮，#row1 行的显示状态就会切换。

在实际应用中，可能需要根据更复杂的条件来显示或隐藏 tr。比如根据用户输入的值进行判断：

$(document).ready(function() {
  $('#checkButton').click(function() {
    var inputValue = $('#inputBox').val();
    if (inputValue === '特定值') {
      $('#row2').show();
    } else {
      $('#row2').hide();
    }
  });
});

通过这种方式，可以实现根据用户输入或其他逻辑动态地控制表格行的显示与隐藏，提升用户体验和页面交互性。利用 jQuery 的这些方法，能轻松满足各种复杂场景下 tr 动态显示与隐藏的需求，为网页开发增添更多的灵活性和功能性。