HTML5 - 如何对复杂表格元素进行折叠和展开

Question

你好，我需要一个可以展开和折叠表格的函数。大多数在线上找到的代码都是为定义一个js函数。

但我的情况更加复杂，如图片所示。点击“参数1”后，它将展开并显示一个合并单元格和2个单元格。

那么，在这种情况下，我该如何实现此功能呢？提前感谢您的帮助。

以下是用于测试表格的简单片段：

https://jsfiddle.net/knspgwkq/

测试表格的HTML代码

<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td rowspan="2">Sub level-1 </td>
    <td>Sub parameter (1)</td>
  </tr>
  <tr>
    <td>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

JS

$('.P1').click(function(){
  $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
  $(this).nextUntil('.P2').slideToggle(100, function(){
  });
});

- Héléna

---

嗨@jcubic，可以告诉我你在哪里编辑了吗？ - Héléna

他添加了标签"jQuery"。 - phts

当您拥有足够的声望时，您可以编辑标签。 - jcubic

当您将P1 P2类添加到tr元素时，这将起作用。 - jcubic

@A. Wolff，感谢您提供的“+”示例，我会尝试您和Paran0a的建议。 - Héléna

Answer 1

试试为您需要控制的单元格添加自定义数据属性如何？ 示例链接：https://jsfiddle.net/knspgwkq/7/ 在父元素中使用 data-collapsable-parent 并设置相应的键值，子元素则需使用 data-collapsable-child 并设置与父元素相同的键值，以实现显示/隐藏操作。

如果您需要进一步实现折叠和展开效果，请查看下面的示例。通过单击 "Parameter 1" ，然后选中 "Sub parameter (2)"，您将打开其他可折叠元素。

示例链接：https://jsfiddle.net/knspgwkq/9/

$('[data-collapsable-parent]').click(function(){
  var child = $(this).attr("data-collapsable-parent");
  $('[data-collapsable-child="'+ child + '"]').toggle('slow');
});

 [data-collapsable-child] {
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2" data-collapsable-parent="1"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td data-collapsable-child="1" rowspan="2">Sub level-1 </td>
    <td data-collapsable-child="1" >Sub parameter (1)</td>
  </tr>
  <tr>
    <td data-collapsable-child="1" >Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

- Paran0a

---

但是根本没有任何动画。 - A. Wolff

你的动画看起来很糟糕，这是我的个人看法。话虽如此，你确实无法对任何表格行进行动画处理。 - A. Wolff

对不起，我没有清楚地理解问题，我不知道需要动画。我应该删除我的答案吗？ - Paran0a

Hi@Paran0a，感谢您提出这个想法。我对[data-collapsable-child="1"]有疑问。如果我需要在单击“子参数（1）”时进一步展开，我需要将“1”更改为“2”吗？ - Héléna

@Paran0a 不要删掉它。也许这正是 OP 需要的。OP 没有明确表示她只想要任何动画，但她的代码表明了这一点。 - A. Wolff

Answer 2

这里有个想法：使用两个开关来实现向上折叠效果和向下展开效果（无需修改表格结构）。

// Basic toggle without animation
//$('.P1').on("click", function() {
//  $(this).closest("tr").nextUntil('.P2').toggle();
//});

// Better sliding toggle
$('.P1').on("click", function() {
  $trs = $(this).closest("tr").nextUntil('.P2');
  $trs.eq(1).find("td").eq(0).slideToggle(100, function() {
    $trs.eq(0).slideToggle(100);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2">
      <div align="center">1 st level</div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="P1">Parameter 1</div>
    </td>
  </tr>
  <tr>
    <td rowspan="2">Sub level-1</td>
    <td>Sub parameter (1)</td>
  </tr>
  <tr>
    <td>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="P2">Parameter 2</div>
    </td>
  </tr>
</table>

- Drakes

---

谢谢你的想法，我已经接受了Paran0a的答案，很抱歉我不能同时接受两个答案。但是知道这种方法也很好。 - Héléna