html5 - 如何折叠和展开复杂的 table 元素
html5 - how to collapsing and expanding for complicated table elements
嗨,我需要 table 的展开和折叠功能。在网上找到的代码大部分都是 for 然后在 js 中为这个 tr class.
定义一个函数
但我的情况如图所示更复杂。单击 "Parameter 1" 后它将展开并显示合并的单元格和 2 个单元格。
那么在这种情况下,我该如何实现这个功能呢?提前致谢。
附件是 table 的简单片段,供您测试:
https://jsfiddle.net/knspgwkq/
html 用于测试 table
<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(){
});
});
将您的自定义数据属性添加到您希望控制的单元格怎么样?
现场示例 https://jsfiddle.net/knspgwkq/7/
您的 parent 将保存 data-collapsable-parent
和一些键值。
而你希望 hide/show 与上面 parent 的 children 将持有 data-collapsable-child
与 parent.
相同的键值
如果您需要额外的折叠扩展元素,请查看此示例
通过单击参数 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 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>
这里有一个想法:使用两个切换来获得向上折叠效果和向下展开效果(无需修改您的 table 结构)。
// 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>
嗨,我需要 table 的展开和折叠功能。在网上找到的代码大部分都是 for 然后在 js 中为这个 tr class.
定义一个函数但我的情况如图所示更复杂。单击 "Parameter 1" 后它将展开并显示合并的单元格和 2 个单元格。
那么在这种情况下,我该如何实现这个功能呢?提前致谢。
附件是 table 的简单片段,供您测试:
https://jsfiddle.net/knspgwkq/
html 用于测试 table
<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(){
});
});
将您的自定义数据属性添加到您希望控制的单元格怎么样? 现场示例 https://jsfiddle.net/knspgwkq/7/
您的 parent 将保存 data-collapsable-parent
和一些键值。
而你希望 hide/show 与上面 parent 的 children 将持有 data-collapsable-child
与 parent.
如果您需要额外的折叠扩展元素,请查看此示例 通过单击参数 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 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>
这里有一个想法:使用两个切换来获得向上折叠效果和向下展开效果(无需修改您的 table 结构)。
// 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>