Javascript 根据单击的按钮显示隐藏特定表行
使用切换/点击操作操作隐藏行的表。类或ID，取决于单击的按钮。所有内容都显示在第一页/表格加载上，单击一个按钮，任何具有该类ID的内容都将保留，其他所有内容将消失/隐藏，直到单击另一个按钮。有时会有多个targettable类，因此可以通过单击不同的按钮来查看它们。我将总共有七个按钮，可能更晚，我已经将我最新的尝试放在下面，它正在bootstrap 4框架中运行，但是我已经删除了所有的bootstrap元素，因为我试图解决隐藏/显示行为。我在谷歌上搜索了这个主题，我浏览了javascript fiddle、stackoverflow、w3schools和其他一些资源，我找到了一些与我尝试做的类似的例子，但我无法成功地重新调整这些例子的用途Javascript 根据单击的按钮显示隐藏特定表行,javascript,bootstrap-4,html-table,show-hide,Javascript,Bootstrap 4,Html Table,Show Hide,使用切换/点击操作操作隐藏行的表。类或ID，取决于单击的按钮。所有内容都显示在第一页/表格加载上，单击一个按钮，任何具有该类ID的内容都将保留，其他所有内容将消失/隐藏，直到单击另一个按钮。有时会有多个targettable类，因此可以通过单击不同的按钮来查看它们。我将总共有七个按钮，可能更晚，我已经将我最新的尝试放在下面，它正在bootstrap 4框架中运行，但是我已经删除了所有的bootstrap元素，因为我试图解决隐藏/显示行为。我在谷歌上搜索了这个主题，我浏览了javascript f
<!DOCTYPE html>
<html>
<body>
<link src="cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
<script>
$(document).ready(function(){
$('#taken').on('click',function(){
$('.taken').toggle();
});
});
</script>
<input type = "button" name = "all" id="all" value = "all" >
<input type = "button" name = "taken" id="taken" value = "taken" >
<input type = "button" name = "open" id="open" value = "open" >
<table style="width:100%" id="testing">
<tr class="all taken">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="all open">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="all open">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr class="all taken">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
$（文档）.ready（函数（）{
$（'#take'）。在（'click'，function（）{
$（'.take'）.toggle（）；
});
});
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
约翰
雌鹿
80
约翰
雌鹿
80