Développer / réduire les Tableaux HTML

J'ai un tableau HTML qui est généré dynamiquement à partir du serveur.

Je veux avoir une expand/collapse dans ce tableau html est quand je clique sur développez je devrais obtenir une nouvelle colonne et les lignes et sur l'effondrement, il doit être tel qu'il était avant.

Je ne veux pas utiliser un 3ème partie plugin pour ça. Je veux utiliser jQuery et Ajax.

Pouvez-vous m'aider ou fournir toute info sur comment puis-je faire cela?

Où sont les contenus de la nouvelle de colonnes et de lignes, en venir? Quelle structure avez-vous? De quoi avez-vous déjà essayé? Ce qui n'a pas de travail?
veut-il un tutoriel ou quelque chose comme cela pour commencer... il n'a pas de problème, bt il ne sais pas quoi faire.
le contenu de la ligne et la colonne viennent aussi à partir du serveur à partir d'un datatable ,je veux savoir la logique comment puis-je commencer avec elle.
rapide et sale: vous avez un moyen de générer dynamiquement le tableau 1. faire de même pour modtable1. lors de l'expansion effacer table1 ajouter modtable1. sur l'effondrement effacer modtable1 ajouter table1. optimiser plus tard.

OriginalL'auteur Anish Sharma | 2011-04-06

11

Ok je crois que la question est trop vague pour être répondu complètement si vous pensez à ce sujet.

Où sont les contenus de la nouvelle de colonnes et de lignes, en venir? Quelle structure avez-vous? De quoi avez-vous déjà essayé? Ce qui n'a pas de travail? ^{David Thomas commentaire.}

Si vous ne souhaitez pas utiliser un plugin jQuery comme cette une cela signifie que vous aurez à faire vous-même et une) personne ici ne le fera pour vous complètement b) le sont beaucoup moins, sans aucune information, qui serait juste deviner.

Que dit voici un rapide exemple de ce que votre approche devrait être.

HTML
```
<table border="1">
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
</table>
```
jQuery
```
$(".clickable").click(function() {

    $(this).next().toggle();

});
```
Comme je l'ai dit c'est juste un exemple, il n'est pas évolutif (n'a même pas de soutien se cachent deux lignes), vous pouvez voir une démo ici.

Je puisse mettre à jour la réponse avec une meilleure réponse plus personnalisée si vous mettez à jour votre question.

Mais si vous voulez construire vous-même, ce sont certains de ce qui pourrait venir dans maniable:

.show()

.hide()

.toggle()

.animate()

:nth-child

.enfants (les)

Et beaucoup d'autres en fonction de votre approche.

Bonne chance!

Exactement ce que je cherchais. Merci!!!!

OriginalL'auteur Trufa

Voici un exemple rapide, j'espère que Cela aide si j'ai bien compris votre question.

Avec cette structure:

 <a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
    <thead>
        <tr>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
    </tbody>
</table>

Peut-être que vous pourriez faire quelque chose comme ceci:

  $(document).ready(function () {
        $(".expand").click(function () {
            $("#mytable tbody").show("slow");
        });
        $(".collapse").click(function () {
            $("#mytable tbody").hide("fast");
        });
    });

le code est bon, c'est une question de ce que vous avez réellement besoin. La Mine se cache l'ensemble de la table.
+1, voici l'exemple de travail btw jsfiddle.net/Trufa/b3pTg/1
OMG @Trufa, ne saviez pas sur jsfiddle, tellement agréable. Merci.
hehe il vous manque,c'est un outil fantastique! BTW quelques autres qui viennent à portée de main ici stackoverflow.com/q/4362906

OriginalL'auteur Ernesto

0

Un accordéon est une solution simple et élégante: javascript et css.

Ce violon est à partir de la W3Schools l'explication ci-dessus.

OriginalL'auteur tony gil

Vous devez vous connecter pour publier un commentaire.