jquery 隐藏与显示tr标签示例代码

下面是关于jQuery隐藏与显示<tr>标签的攻略。

前置要求

在使用本教程前，需要确保您已经了解以下内容：

• HTML基础
• CSS基础
• jQuery基础

操作步骤

方法一：使用隐藏和显示方法

在jQuery中，可以使用hide()方法隐藏元素，show()方法显示元素。将这两个方法应用于<tr>标签，即可实现隐藏和显示<tr>标签。

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
  <tr>
    <td>第三行第一列</td>
    <td>第三行第二列</td>
  </tr>
</table>

$(document).ready(function(){
  // 隐藏第二行
  $("tr:eq(1)").hide();
  // 显示第二行
  $("tr:eq(1)").show();
});

在上面的示例代码中，我们使用了eq()方法来选择表格中的第二行<tr>标签。eq()方法用于选择指定索引值的元素，注意索引值从0开始。hide()方法用于将选定的元素隐藏，show()方法用于显示元素。在上述示例中，当页面加载完成后，第二行会被隐藏，然后再次显示。

方法二：使用CSS类和toggle方法

另外一种方法是通过添加CSS类并使用toggle方法实现隐藏与显示。

首先，我们需要为要隐藏或显示的<tr>标签命名一个CSS类名。然后，使用toggle()方法在这些标签上应用该类，以便在每次单击链接时切换它们的可见性。

<table>
  <tr class="hide">
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
  <tr class="hide">
    <td>第三行第一列</td>
    <td>第三行第二列</td>
  </tr>
</table>
<a href="#" id="toggle">隐藏/显示</a>

.hide {
  display: none;
}

$(document).ready(function(){
  $("#toggle").click(function(){
    $("tr.hide").toggle();
  });
});

在上述示例中，我们为第一行和第三行添加了一个.hide类，用于隐藏它们。当单击链接时，toggle()方法应用于所有带有.hide类的<tr>标签，这样它们的可见性就会切换。由于我们在CSS中指定了.hide类的显示值为none，因此在单击链接时，它们会被隐藏或显示。

结论

本教程讲解了两种不同的方法来隐藏和显示<tr>标签，旨在帮助您以不同的方式实现标签可见性的控制。这有助于在需要展示某一部分数据时，减少页面的占用空间。