mettre en œuvre le pliage de code pour un rapport avec jquery

Question

Je suis en train de réduire ou développer des lignes de table avec + et -. Signe affiché sur la première colonne, en utilisant jquery

<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");

   });


});

Je suis en train d'utiliser ce code. Mais je veux que l'enfant du parent que je suis en cliquant sur seul à être basculée. Toutes les idées sur la façon de le faire?

Exemple HTML

<table>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>

</table>

Edit: Je suis en train de mettre une image de + ou - dans la même ligne que la ligne 1, line4 et essayer d'obtenir une poignée de celui-ci dans le script java pour basculer entre les deux images. Quelqu'un peut me aider à ce sujet?

Edit 1: Puis-je l'arbre entier est effondré lorsque le document est chargé. Je suis débutant à l'utilisation XQuery.

Answer 1

(En responce le code modifié)

Il y a deux façons: Soit vous modifier le code pour activer uniquement les lignes suivantes l'en-tête cliquée:

$("tr.header").click(function () { 
  $(this).nextUntil(".header").slideToggle("fast");
});

ou utiliser le code d'origine et envelopper les sections en TBODYs:

<table>
  <tbody>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>
  </tbody>
</table>

Answer 2

Jetez un oeil à ce pour incorporer la bascule d'image:

En utilisant JQuery pour trouver la ligne suivante de table

Je l'intégra dans le code Umang partagé et que cela semble travailler sur le basculement l'image ainsi que les lignes en dessous.

$ (document) .ready (function () {

// Cela retrousser les lignes sur la charge de la page initiale    $ ( "Tr.header"). NextUntil ( "en-tête "). SlideToggle (" rapide", function () {     }); // fin slideToggle

// Ceci permet d'augmenter la ligne d'effondrement et bascule + et - images    $ ( "Tr.header"). Cliquez sur (function () {

   $(this).nextUntil(".header").slideToggle("fast", function () { 
   }); //end slideToggle

   if ( ( $(this).hasClass('hidden') ) ) {
     $('img', this).attr("src", "plus.gif");
     $('img', this).attr("alt", "Click to expand row");
  } else {
     $('img', this).attr("src", "minus.gif");
     $('img', this).attr("alt", "Click to collapse row");
  }

   $(this).toggleClass('hidden');
   $(this).parent().next().toggle();

}); // cliquez fin

}); // fin document.ready

Voici le code HTML associé, mais vous devrez supprimer les commentaires HTML dans le tag img parce que c'est juste pour empêcher stackoverflow de penser que je poste une image réelle.

                            1         ligne 1                               2         ligne 2                             3         line3                              4         line4                              5         line5                             6         Line6

Answer 3

Votre code actuel ne se développe / réduit l'enfant de la ligne mère. Dans votre exemple, il s'effondre les deux rangées d'enfants (data1, donnée2 & Data3, données4)

Vous essayez d'atteindre quelque chose de différent ici?

Umang