Implementar dobragem de código para um relatório com jQuery

Question

Estou tentando entrar em colapso ou expandir linhas de tabela com + e - sinal exibido na primeira coluna, usando jQuery.

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

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

   });


});

Estou tentando usar este código. Mas quero que o filho do pai em que estou clicando sozinho para ser alterado. Alguma idéia de como fazer isso?

Amostra 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: Estou tentando colocar uma imagem de + ou - na mesma linha da linha 1, linha4 e tentando obter uma identificação no script Java para alternar entre as duas imagens. Alguns podem me ajudar nisso?

EDIT 1: Posso ter a árvore inteira desabar quando o documento é carregado. Eu sou iniciante com o uso do XQuery.

Answer 1

(Em resposta ao código alterado)

Existem duas maneiras: altere o código para alternar apenas as linhas após o cabeçalho clicado:

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

ou use o código original e envolva as seções em 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

Dê uma olhada nisso para incorporar a imagem da imagem:

Usando o jQuery para encontrar a próxima linha da tabela

Eu o incorporei ao código compartilhado que umang compartilhou e isso parece funcionar para alternar a imagem e as linhas embaixo.

$ (document) .ready (function () {

// Isso rolará linhas na página inicial carregar $ ("tr.header"). NextUntil (". Cabeçalho"). SlideToggle ("Fast", function () {}); // End SlideToggle

// Isso expandirá a linha de colapso e alternativa + e - imagens $ ("tr.header"). Clique (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();

}); // Clique em End

}); // Document.ready

Aqui está o HTML associado, mas você terá que remover os comentários HTML em torno da tag IMG, porque isso é apenas para impedir que o StackOverflow pense que estou postando uma imagem real.

1 linha1 2 linha2 3 linha3 4 linha4 5 linha5 6 linha6

Answer 3

Seu código atual expande/colapsa o filho da linha dos pais. No seu exemplo, ele colapsa as duas linhas infantis (Data1, Data2 e Data3, Data4)

Você está tentando alcançar algo diferente aqui?

Umang