1

我正在尝试使用 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 的初学者。

4

3 回答 3

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>
于 2010-04-19T10:37:30.173 回答
1

看看这个以合并图像切换：

使用 JQuery 查找下一个表行

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

$(文档).ready(函数() {

//这将在初始页面加载时汇总行 $("tr.header").nextUntil(".header").slideToggle("fast", function () { }); //结束幻灯片切换

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

}); //结束点击

}); //结束文档.ready

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

1 线 1 2 线 2 3 线 3 4 线 4 5 线 5 6 线 6
于 2010-05-10T20:31:16.533 回答
0

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

你想在这里实现一些不同的东西吗？

乌芒

于 2010-04-19T10:19:10.207 回答