Bootstrap/jquery cliquez pour afficher plusieurs lignes masquées dans une table

J'ai essayé plusieurs solutions à ce [trouvé ici sur la pile d'échange] mais semblent incapables d'obtenir mon exemple de travail.

Comment puis-je régler ce tableau, de sorte qu'en cliquant sur le "cliquable" TR affiche toutes les lignes masquées après?

ici, c'est la [résumés] table, remarque c'est bootstrap3 'hover' type:

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

et ici, c'est le peu de JS, je suis à l'aide de [essayer] de révéler les lignes masquées.

$(".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");
    }
});

Cliquant sur le bouton 'cliquable' ligne, n'affiche que la première [ou peut-être la dernière] caché TR.

Votre [liens] ne pas accéder à quoi que ce soit.

OriginalL'auteur Sean Kimball | 2014-03-18

  1. 18

    Utilisation data-toggle='collapse' et data-target. Aussi, l'utilisation de la classe au lieu des id sur les lignes enfants.

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

    Démo: http://www.bootply.com/122870

    Parfait et simple comme je les aime 🙂 chose étrange tho, alors que les lignes 'révéler' eux-mêmes instantanément, après avoir cliqué pour les cacher ils ne fermez pas jusqu'au bout d'environ une seconde de pause. toutes les pensées derrière qui?
    Oui. C'est à cause de Bootstrap de transition de l'animation sur "l'effondrement" de la classe. Vous pouvez l'accélérer en diminuant la durée de l'effet: .collapsing{ -webkit-transition:height .01s ease; transition:height .01s ease } j'ai mis à jour la démo: bootply.com/122870
    Cela ne fonctionne pas sous IE?

    OriginalL'auteur Zim

  2. 2

    Vous utilisez le même id sur plusieurs lignes. Attribuer 68collapsed, 69collapsed en tant que classe, et non pas l'id.

    Voici le jsfiddle: http://jsfiddle.net/9Y6Y6/

    Fondamentalement, id est destiné à identifier de manière unique un élément. Si votre JavaScript ne capte que le premier élément avec l'id et le change.

    Les changements pertinents sont:

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

    (même pour tous les tr)

    et puis la ligne dans le js:

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

    . au lieu de # pour indiquer sa classe à ne pas un code.

    OriginalL'auteur Ayush Chaudhary

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

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

    il veut montrer toutes les lignes après l'cliqué sur une, il ne se montre pas tout, si je clique sur la première ligne après votre montage?
    Je ne pense pas que, littéralement, il signifie "toutes les lignes". J'ai peut-être mal à propos.
    ok, je l'espère. 🙂

    OriginalL'auteur bingjie2680