Développement et la réduction de la rangée de table (tr) à l'aide de jquery

Développement et la réduction de la rangée de table (tr) à l'aide de jquery

J'ai une table avec des actifs et des inactifs, des éléments. Ce tableau est rempli dynamiquement à partir de la base de données. Je suis en train d'ajouter un interrupteur à bascule pour les inactifs seulement des éléments dans mon tableau et afficher tous les éléments actifs. Je veux dire, je veux vous montrer tous les éléments actifs et faites glisser la bascule inactifs seulement des éléments dans mon tableau.

<div class="alertsList">
    <table width="100%">
        <tbody>
            <tr>
                <th></th>
                <th>Id</th>
                <th>From</th>
                <th>Action</th>
                <th>State</th>
                <th>time</th>
                <tr class="alertRow">
                    <td></td>
                    <td>1025973</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
        </tbody>
    </table>
</div>

$('.alertRow.InActive').Parent.click(function () {

    $(this).nextUntil('tr.td.InActive').slideToggle(1000);
});

Mon Violon code

Comment puis-je faire..?

Vérifier simplement si vous avez envisagé d'une manière plus simple (et un peu stupide) solution. Est-il une option pour gérer ces deux réseaux séparés? À la fois de travailler de façon autonome? De cette façon, la fonction de bascule permettra de réduire à masquer et d'afficher le type d'une opération. Active la grille restera toujours vu, et de vous cacher et de montrer les Inactifs séparément. Tout ce que vous devez faire est sûr, c'est que les styles sont appliqués de façon que la largeur des colonnes restent les mêmes pour les deux grilles. Toutes mes excuses si c'est trop simpliste d'une solution.

OriginalL'auteur Kurkula | 2014-09-29