在 JavaScript 中隐藏表格行
Anika Tabassum Era
2024年2月15日
在 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();
});
});
输出：
-Function-to-Hide-Table-Rows.webp)
使用 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>
输出：
-and-hide()-Function-to-Hide-Table-Rows.webp)
