我已经尝试了几种不同的解决方案（在堆栈交换中找到此处），但是似乎无法使我的示例正常工作。
如何设置此表，以便单击“可单击的” TR可以显示其后的所有隐藏行？
这里是[压缩]表，请注意它是bootstrap3'hover'类型：
<table class="table table-condensed table-hover dashboard">
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr class='clickable' id="68" >
<td>visible row</td>
<td> </td>
</tr>
<tr class="collapse out budgets" id="68collapsed">
<td>hidden row</td>
<td> </td>
</tr>
<tr class="collapse out budgets" id="68collapsed">
<td>hidden row</td>
<td> </td>
</tr>
<tr class='clickable' id="69" >
<td>visible row</td>
<td> </td>
</tr>
<tr class="collapse out budgets" id="69collapsed">
<td>hidden row</td>
<td> </td>
</tr>
<tr class="collapse out budgets" id="69collapsed">
<td>hidden row</td>
<td> </td>
</tr>
</tbody>
</table>
这是我用来[尝试]揭示隐藏行的JS代码。
$(".clickable").click(function() {
var id = $(this).attr('id');
var target = '#'+id+'collapsed';
if($(target).hasClass("out")) {
$(target).addClass("in");
$(target).removeClass("out");
} else {
$(target).addClass("out");
$(target).removeClass("in");
}
});
单击'clickable'行，仅显示第一个（或最后一个）隐藏的TR。
使用data-toggle='collapse'和data-target。另外，在子行上使用class而不是id。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<table>
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" id="68" data-target=".68collapsed">
<td>visible row</td>
<td> </td>
</tr>
<tr class="collapse out budgets 68collapsed">
<td>hidden row</td>
<td> </td>
</tr>
<tr class="collapse out budgets 68collapsed">
<td>hidden row</td>
<td> </td>
</tr>
<tr class="clickable" id="69" data-toggle="collapse" data-target=".69collapsed">
<td>visible row</td>
<td> </td>
</tr>
<tr class="collapse out budgets 69collapsed">
<td>hidden row</td>
<td> </td>
</tr>
<tr class="collapse out budgets 69collapsed">
<td>hidden row</td>
<td> </td>
</tr>
</tbody>
</table>您正在多行上使用相同的id。将68collapsed，69collapsed分配为类而不是id。
这里是jsfiddle：http://jsfiddle.net/9Y6Y6/
[基本上，id旨在唯一地标识元素。因此，您当前的JavaScript仅使用ID拾取第一个元素并对其进行更改。
相关更改是：
<tr class="collapse out budgets 68collapsed">
（所有tr都相同）
然后是js中的行：
var target = '.'+id+'collapsed';
[.而不是#表示其类别不是ID。
$(".clickable").click(function() {
$(this).nextUntil('.clickable').show();
});