实现代码折叠与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>

编辑：我试图把+或图像 - 在同一行中的1号线，4号线，并试图得到它的手柄在Java脚本两幅图像之间进行切换。可以将某些帮助我吗？

编辑1：我能要加载文档时整棵树倒塌。我与初学者使用XQuery。

Answer 1

（在性反应的改变后的代码）

有两种方式：要么改变您的代码切换仅点击的标题下面的行：

$("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共享代码和这似乎工作于拨动 图像以及行下面。

（文档）$。就绪（函数（）{

//这将卷起上初始页面加载行    $（ “tr.header”）。nextUntil（ “标题 ”）。的slideToggle（“ 快”，函数（）{     }）; //端的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注释 因为这只是防止计算器从思想我张贴的实际图像。

                            1         一号线                               2         2号线                             3         3号线                              4         4号线                              五         LINE5                             6         LINE6

Answer 3

您当前密码并展开/折叠父行的孩子。在你的例子，它缩短了两个子行（DATA1，DATA2和DATA3，DATA4）

您想在这里实现不同的东西？

Umang