javascript - 使用 jquery 为报告实现代码折叠

Question

我正在尝试使用 jquery 折叠或展开第一列上显示 + 和 - 符号的表格行。

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

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

   });


});

我正在尝试使用此代码。但我希望我单独点击的 parent 的 child 被切换。关于如何做到这一点有什么想法吗？

示例 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");
});

或使用原始代码并将这些部分包装在 TBODY 中:

<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>