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

发布时间：2020-12-17 20:40:59 所属栏目：安全来源：网络整理

导读：我已经尝试了几种不同的解决方案[在堆栈交换中找到]但似乎无法让我的示例正常工作. 如何设置此表以便单击“可点击”TR显示之后的所有隐藏行？这是[浓缩]表,注意它的bootstrap3’悬停’类型： table class="table table-condensed table-hover dashboard" th

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

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

解决方法

使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!