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

Question

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

如何设置此表格，以便单击“可点击”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>&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。

<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>&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>

演示:https://codeply.com/p/3FKaTSrWEA