jQueryを使用したレポートにコード折りたたみを実装します

Question

jQueryを使用して、最初の列に表示された +および - サインでテーブルの行を崩壊または拡張しようとしています。

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

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

   });


});

このコードを使用しようとしています。しかし、私は一人でクリックしている親の子供に切り替えてほしい。それを行う方法についてのアイデアはありますか？

サンプル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>

編集： +または - ライン4と同じ行に +または - line4と同じ行に、Javaスクリプトで2つの画像を切り替えるためにハンドルを取得しようとしています。それについて私を助けることができますか？

編集1：ドキュメントがロードされたときにツリー全体を崩壊させることはできますか。私はXqueryを使用することから初心者です。

Answer 1

（変更されたコードに応答して）

2つの方法があります。クリックされたヘッダーに続く行のみを切り替えるためにコードを変更するかです。

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

または、元のコードを使用して、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

画像のトグルを組み込むためにこれを見てください：

jqueryを使用して次のテーブル行を見つけます

私はそれをUmangを共有したコードに組み込みましたが、これは画像とその下の行の切り替えに取り組んでいるようです。

$（document）.ready（function（）{

//これは、初期ページのload $（ "tr.header"）で行をロールアップします。 // slidetoggleを終了します

//これにより、折りたたみ列とトグル +および - 画像$（ "tr.header"）が展開されます。

   $(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();

}）; //クリックします

}）; // document.readyを終了します

関連するHTMLは次のとおりですが、IMGタグに関するHTMLコメントを削除する必要があります。これは、StackoverFlowが実際の画像を投稿していると思わないようにするためです。

1 line1 2 line2 3 line3 4 line4 5 line5 6 line6

Answer 3

現在のコードは、親行の子を拡張/崩壊させます。あなたの例では、両方の子供の行を崩壊させます（data1、data2＆data3、data4）

ここで何か違うことを達成しようとしていますか？

ウマン