Bootstrap/jquery单击以在表中显示多个隐藏的行

Question

我已经尝试了几种不同的解决方案[在堆栈交换中找到]但似乎无法让我的示例正常工作.

如何设置此表以便单击"可点击"TR显示之后的所有隐藏行？

这是[浓缩]表,注意它的bootstrap3'悬停'类型:

<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>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>

        <tr class='clickable' id="69" >
            <td>visible row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</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.

Answer 1

使用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>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets 68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets 68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>

        <tr class="clickable" id="69" data-toggle="collapse" data-target=".69collapsed">
            <td>visible row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets 69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets 69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

演示:http://www.bootply.com/122870