在 JavaScript 中隐藏表格行

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中隐藏表格行

作者：迹忆客最近更新：2024/03/18 浏览次数：

在 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 的 `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>