我已经尝试了几种不同的解决方案 [在堆栈交换中找到] 但似乎无法让我的示例工作。
如何设置此表格，以便单击“可点击”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");
}
});
单击“可单击”行，仅显示第一个 [或最后一个] 隐藏的 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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></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>关于jquery - Bootstrap/jquery 单击以显示表格中的多个隐藏行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22488590/