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

Answer 2

您在多个行上使用相同的id。将68折叠，69折叠指定为class，而不是id。

这是jsfiddle：http://jsfiddle.net/9Y6Y6/

基本上，id用于唯一地标识一个元素。因此，您当前的JavaScript只获取具有id的第一个元素并对其进行更改。

相关的更改包括：

<tr class="collapse out budgets 68collapsed">

(所有tr相同)

然后是js中的代码行：

var target = '.'+id+'collapsed';

.而不是#来表示它是一个类，而不是一个id。

Answer 3

$(".clickable").click(function() {
    $(this).nextUntil('.clickable').show();
});

https://api.jquery.com/nextUntil/