在 JavaScript 中，我们可以在一个通用的类下定义某些表数据，该类将具有一些可配合的功能。此特定函数将声明该表的行在选择性触发器上的行为方式。
在 JavaScript 中，我们可以在一个通用的 类 下定义某些表数据，该类将具有一些可配合的功能。此特定函数将声明该表的行在选择性触发器上的行为方式。
使用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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
