html5 - 如何折叠和展开复杂的表格元素

Posted 2023-03-24

【中文标题】html5 - 如何折叠和展开复杂的表格元素

【英文标题】：html5 - how to collapsing and expanding for complicated table elements

【发布时间】：2016-03-22 07:34:01

【问题描述】：

您好，我需要一个表格的展开和折叠功能。网上找到的代码大部分都是for然后在js中为这个tr类定义一个函数。

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

那么在这种情况下，我该如何实现这个功能呢？提前致谢。

附件是一个简单的sn-p，用于您的测试表：

https://jsfiddle.net/knspgwkq/

测试表的html

<table  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()
  );
);

【问题讨论】：

嗨@jcubic，我可以知道你在哪里编辑过吗？

他添加了标签“jquery”

当你有足够的声誉时，你可以只编辑标签。

这将在您将 P1 P2 类添加到 tr 元素时起作用

@jcubic，有问题因为“参数”是一个

，而不是 ：参数1.

【参考方案1】：

如何将您的自定义数据属性添加到您希望控制的单元格中？ 实例https://jsfiddle.net/knspgwkq/7/

您的父母将持有带有一些关键值的data-collapsable-parent。 您希望与上述父级一起隐藏/显示的子级将持有data-collapsable-child，其键值与父级相同。

如果您需要额外的折叠扩展元素，请查看此示例 通过单击参数 1，然后单击子参数 (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  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>

【讨论】：

但是根本没有动画

我添加了某种动画：/ 不知道是否符合需求。

是的，但你的动画看起来真的很糟糕。也就是说，您不能真正为任何表格行设置动画

OP在哪里提到动画？他只提到show a merged cell and 2 cells

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

【参考方案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  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>

【讨论】：

感谢您的想法，因为我已经接受了 Paran0a 的回答，抱歉我不能同时接受 2 个。但也很高兴知道这种方法