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

或使用原始代码并将部分包装在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>

Answer 2

看看这个用于合并图像切换：

Using JQuery to find the next table row

我将它合并到Umang共享的代码中，这似乎可以解决问题图像以及下面的行。

$（document）.ready（function（）{

//这将在初始页面加载时汇总行 $（“tr.header”）。nextUntil（“。header”）。slideToggle（“fast”，function（）{ }）; //结束slideToggle

//这将展开折叠行和切换+和 - 图像 $（“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();

}）; //结束点击

}）; //结束document.ready

以下是关联的HTML，但您必须删除img标记周围的HTML注释因为这只是为了防止stackoverflow认为我发布的是实际图像。

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

Answer 3

您当前的代码确实展开/折叠了父行的子代。在您的示例中，它会折叠两个子行（data1，data2＆amp; data3，data4）

你想在这里尝试不同的东西吗？

Umang

使用jquery为报表实现代码折叠

3 个答案: