Code-Faltung für einen Bericht mit jquery implementieren

Question

Ich versuche Tabellenzeilen mit + zusammenzubrechen oder zu erweitern und -. Zeichen in der ersten Spalte angezeigt, jquery mit

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

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

   });


});

Ich versuche, diesen Code zu verwenden. Aber ich will das Kind der Eltern auf allein ich Anklicken umgeschaltet werden. Alle Ideen, wie es zu tun?

Beispiel-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: Ich versuche, ein Bild von + zu setzen oder - in der gleichen Zeile wie Linie 1, line4 und versuche, einen Griff in dem Java-Skript zwischen den beiden Bildern zu Schaltern zu erhalten. Kann etwas Hilfe mich auf das?

Edit 1: Kann ich den ganzen Baum zusammengebrochen, wenn das Dokument geladen wird. Ich bin Anfänger mit XQuery verwendet wird.

Answer 1

(In Antwort-an den geänderten Code)

Es gibt zwei Möglichkeiten: Entweder Sie Code ändern, nur die Zeilen nach dem geklickten Header wechseln:

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

oder den ursprünglichen Code verwenden und die Abschnitte in TBODYs wickeln:

<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

Werfen Sie einen Blick auf diese für den Einbau des Bildes Toggle:

JQuery Mit der nächsten Tabellenzeile finden

ich gliederte sie in den Code Umang geteilt und dies scheint zu Arbeit auf der Hin- und Herschalten Bild sowie die Zeilen darunter.

$ (document) .ready (function () {

// Dies wird aufrollen Reihen auf erster Seite zu laden    $ ( "Tr.header"). NextUntil ( "header "). SlideToggle (" schnell", function () {     }); // end slideToggle

// Dies wird Zusammenbruch Reihe erweitern und Umschalten + und - Bilder    $ ( "Tr.header"). Klicken (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();

}); // end Klick

}); // end document.ready

Hier ist die zugehörige HTML, aber Sie werden die HTML-Kommentare um den img-Tag entfernen müssen Ich poste ein tatsächliches Bild, weil das nur zu verhindern, dass Stackoverflow zu denken ist.

                            1         Linie 1                               2         Zeile 2                             3         line3                              4         line4                              5         line5                             6         line6

Answer 3

Ihr aktueller Code nicht zeigen / kollabiert das Kind der Elternzeile. In Ihrem Beispiel, bricht es die beiden untergeordneten Zeilen (data1, Daten2 & data3, data4)

Sind Sie versuchen, etwas anderes hier zu erreichen?

Umang