Question

嗨，我需要一个表格的扩展和折叠功能。在线上找到的代码大多数是for，然后在js中为这个tr类定义一个函数。

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

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

附件是测试表的简单片段：

html for test 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(){
  });
});

Answer 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 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>

Answer 2

这里有一个想法：使用两个切换来获得向上折叠效果，以及向下扩展效果（不修改表结构）。

＆＃13;

// 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);
  });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: