implementare il codice pieghevole per un rapporto con jQuery

Question

Sto cercando di comprimere o espandere le righe della tabella con + e -. Segno visualizzato sulla prima colonna, utilizzando jQuery

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

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

   });


});

Sto cercando di utilizzare questo codice. Ma io voglio il bambino del genitore sto cliccando su da solo per essere attivato. Tutte le idee su come farlo?

HTML di esempio

<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: Sto cercando di mettere un'immagine di + o - nella stessa riga come la linea 1, Forza 4 e cercando di ottenere una maniglia di esso nello script Java per passare tra le due immagini. Può qualcuno mi aiuto su questo?

Modifica 1: posso avere tutto l'albero è crollato quando il documento viene caricato. Sono principiante con l'utilizzo di XQuery.

Answer 1

(Nella responce al codice modificato)

Ci sono due modi: o cambiare il vostro codice per attivare o disattivare solo le righe che seguono l'intestazione chiamate:

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

o utilizzare il codice originale e avvolgere le sezioni in 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

Date un'occhiata a questo per incorporare la levetta immagine:

utilizzando jQuery per trovare la riga della tabella successiva

ho incorporato nel codice Umang condiviso e questo sembra funzionare sulla commutazione della immagine così come le file sotto.

$ (document) .ready (function () {

// Questo rimboccarsi righe sulla caricamento iniziale della pagina    $ ( "Tr.header"). NextUntil ( "header "). SlideToggle (" fast", function () {     }); // fine slideToggle

// Questa riga si espanderà collasso e ginocchiera + e - immagini    $ ( "Tr.header"). Cliccare (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();

}); // fine click

}); // fine document.ready

Ecco associati HTML, ma si dovrà rimuovere i commenti HTML in tutto il tag img perché questo è solo per evitare di pensare StackOverflow sto postando un'immagine vera e propria.

                            1         Linea 1                               2         linea 2                             3         line3                              4         Line4                              5         Line5                             6         Line6

Answer 3

Il tuo codice attuale non espandere / crolla il figlio della riga padre. Nel tuo esempio, crolla entrambe le righe figlio (data1, Dati2 & dati3, data4)

Stai cercando di ottenere qualcosa di diverso qui?

Umang