我已经尝试了几种不同的解决方案[在堆栈交换中找到]，但似乎无法让我的示例正常工作。
如何设置此表格以便点击“可点击的”表格。 TR显示之后的所有隐藏行？
这是[简明]表格，请注意它的bootstrap3＆＃39; hover＆＃39;类型：
<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");
}
});
点击＆＃39;可点击的＆＃39;行，仅显示第一个[或可能最后]隐藏的TR。
答案 0 :(得分：18)
使用data-toggle='collapse'和data-target。另外，在子行上使用class而不是id。
<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>
答案 1 :(得分：2)
您在多行上使用相同的id。将68collapsed，69collapsed分配为class而不是id。
这是jsfiddle：http://jsfiddle.net/9Y6Y6/
基本上，id用于唯一标识元素。因此，您当前的JavaScript只会获取带有id的第一个元素并更改它。
相关的变化是：
<tr class="collapse out budgets 68collapsed">
（所有tr的相同）
然后是js中的一行：
var target = '.'+id+'collapsed';
.而非#表示其类不是ID。
答案 2 :(得分：1)
$(".clickable").click(function() {
$(this).nextUntil('.clickable').show();
});