嗨,我需要一个扩展和崩溃功能的表.在线上找到的代码大部分是为了,然后在js中为这个tr类定义一个函数.
但我的情况比较复杂,如图所示.点击“参数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(){
});
});
解决方法
如何将自定义数据属性添加到要控制的单元格？
实例 https://jsfiddle.net/knspgwkq/7/
实例 https://jsfiddle.net/knspgwkq/7/
您的父母将拥有一些关键值的数据可折叠父项.
而您希望隐藏/显示上述父级的孩子将保存与父级具有相同键值的data-collapsable-child.
如果您需要额外的折叠扩展元素,请查看此示例
通过单击参数1,然后单击Sub参数(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>
