在 JavaScript 中隐藏表格行

Anika Tabassum Era 2024年2月15日 JavaScript JavaScript Table
  1. 使用 jQuery 的 toggle() 函数在 JavaScript 中隐藏表格行
  2. 使用 jQuery 的 show() 和 hide() 函数在 JavaScript 中隐藏表格行
在 JavaScript 中隐藏表格行

在 JavaScript 中，我们可以在一个通用的 类 下定义某些表数据，该类将具有一些可配合的功能。此特定函数将声明该表的行在选择性触发器上的行为方式。

简单来说，一个按钮或链接标签将触发一个功能，该功能将具有隐藏和显示表格行的详细信息。

在这里，在我们的示例中，我们将关注 jQuery 的 toggle() 函数以及 show() 和 hide() 函数。这两种方式都可以推断为行扩展和收缩。

让我们跳进代码。

使用 jQuery 的 toggle() 函数在 JavaScript 中隐藏表格行

该示例将采用表格行并将它们设置为 display: "none"。当点击某个 anchor 标签时，它会将当前阶段重新定义为 display: "block"。

这个过程反之亦然，因此我们将得到预期的结果。以下代码行演示了其余部分。

代码片段：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="1">+</a></td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="2">+</a></td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
</table>

$(document).ready(function() {
  $('.toggler').click(function(e) {
    e.preventDefault();
    $('.cat' + $(this).attr('data-prod-cat')).toggle();
  });
});

输出：

使用 jQuery toggle() 函数隐藏表格行

使用 jQuery 的 show() 和 hide() 函数在 JavaScript 中隐藏表格行

我们将有两个可点击的；一个将执行以呈现表行，另一个将缩小行。前面的例子有一个可点击的来完成显示和隐藏行的任务。

但是我们将有不同的方式来完成相同的任务。让我们检查一下代码块。

代码片段：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $(".cat1").hide();
  });
  $("#show").click(function(){
    $(".cat1").show();
  });
});
</script>
</head>
<body>
  <table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    </table>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

输出：

使用 jQuery show() 和 hide() 函数隐藏表格行

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者： Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

相关文章 - JavaScript Table