Bootstrap/jquery 单击以显示表中的多个隐藏行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22488590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap/jquery click to show multiple hidden rows in a table
提问by Sean Kimball
I've tried several different solutions to this [found here on stack exchange] but seem unable to get my example working.
我已经尝试了几种不同的解决方案[在堆栈交换上找到]，但似乎无法让我的示例工作。
How do I set this table up so that clicking on the 'clickable' TR shows all the hidden rows after it?
如何设置此表，以便单击“可点击”TR 显示其后的所有隐藏行？
here is the [condensed] table, note it's bootstrap3 'hover' type:
这是 [condensed] 表，注意它是 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>
and here is the bit of JS I'm using to [try] to reveal the hidden rows.
这是我用来[尝试]显示隐藏行的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");
}
});
Clicking on the 'clickable' row, only shows the first [or maybe last] hidden TR.
单击“可点击”行，仅显示第一个（或可能是最后一个）隐藏的 TR。
回答by Zim
Use data-toggle='collapse'and data-target. Also, use class instead of id on the child rows.
使用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>回答by Ayush Chaudhary
You are using the same idon multiple rows. Assign 68collapsed, 69collapsed as class and not id.
您id在多行上使用相同的内容。将 68collapsed、69collapsed 分配为类而不是 id。
Here's the jsfiddle: http://jsfiddle.net/9Y6Y6/
这是 jsfiddle：http: //jsfiddle.net/9Y6Y6/
Basically, idis meant to uniquely identify an element. So your current JavaScript only picks up the first element with the id and changes it.
基本上，id旨在唯一标识一个元素。因此，您当前的 JavaScript 仅选取具有 id 的第一个元素并对其进行更改。
The relevant changes are:
相关的变化是：
<tr class="collapse out budgets 68collapsed">
(same for all tr's)
（所有 tr 相同）
and then the line in the js:
然后是 js 中的那一行：
var target = '.'+id+'collapsed';
.instead of #to indicate its a class not an id.
.而不是#表示它是一个类而不是一个 id。
回答by bingjie2680
$(".clickable").click(function() {
$(this).nextUntil('.clickable').show();
});
