aplicar el plegado de código para un informe con jQuery

Question

Estoy tratando de contraer o expandir filas de la tabla con + y -. Signo aparece en la primera columna, usando jQuery

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

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

   });


});

Estoy tratando de utilizar este código. Pero quiero que el niño de los padres que estoy haciendo clic en solas para activar y desactivar. Cualquier ideas sobre cómo hacerlo?

HTML de ejemplo

<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: Estoy tratando de poner una imagen de + o - en la misma fila que la línea 1, línea 4 y tratando de conseguir una manija de ella en la java script para cambiar entre las dos imágenes. Puede algunos me ayuda en eso?

Editar 1: ¿Puedo tener todo el árbol se derrumbó cuando se carga el documento. Soy principiante con el uso de XQuery.

Answer 1

(En responce al código modificado)

Hay dos maneras: o bien que cambiar el código para cambiar sólo las filas siguientes de la cabecera de clics:

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

o utilice el código original y envolver las secciones 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

Tome un vistazo a esto para la incorporación de la palanca de imagen:

usando jQuery para encontrar la siguiente fila de la tabla

He incorporado en el código Umang compartido y esto parece trabajar en alternar el imagen, así como las filas debajo.

$ (document) ready (function () {

// Esto enrollar filas al cargar la página inicial    $ ( "Tr.header"). NextUntil ( "cabecera "). SlideToggle (" rápido", function () {     }); // fin slideToggle

// Esta fila colapso se expandirá y alternar + y - imágenes    $ ( "Tr.header"). Click (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();

}); // fin clic

}); // fin document.ready

Aquí está el código HTML correspondientes, sino que tendrá que eliminar los comentarios HTML alrededor de la etiqueta img porque eso es sólo para prevenir stackoverflow de pensar les dejo una imagen real.

                            1         línea 1                               2         línea 2                             3         línea 3                              4         line4                              5         line5                             6         Line6

Answer 3

Su código actual se expande / contrae el niño de la fila principal. En su ejemplo, se colapsa las dos filas secundarias (datos1, datos2 y Data3, datos4)

¿Estás tratando de lograr algo diferente aquí?

Umang