Question

我有一些包含一些行的表。每行获得data-id属性，所有“子”节点都获得data-parent-id属性。

<table>
    <tr data-id="1"></tr>
      <tr data-id="1-1" data-parent-id="1"></tr>
        <tr data-id="1-1-1" data-parent-id="1-1"></tr>
          <tr data-id="1-1-1-1" data-parent-id="1-1-1"></tr>
    <tr data-id="2></tr>
      <tr data-id="2-1" data-parent-id="2"></tr>
      <tr data-id="2-2" data-parent-id="2"></tr>
        <tr data-id="2-2-1" data-parent-id="2-2"></tr>
        <tr data-id="2-2-2" data-parent-id="2-2"></tr>
        <tr data-id="2-2-3" data-parent-id="2-2"></tr>
    <tr data-id="3"></tr>
</table>

我在代码中做了一些缩进，因此更容易看到子/父关系。

如何使这些表格行可折叠？

我已经制作了这个javascript

$('tr[data-id]').css('cursor', 'pointer').click(function() {
    var parentId = $(this).attr('data-id');

    // set status
    $(this).toggleClass('expanded collapsed');

    // collapse/expand child nodes
    $("tr[data-parent-id='" + parentId + "']").toggleClass('hidden');

    // icon
    $(this).children('td').children('i').toggleClass('fa-caret-right fa-caret-down');
});

它会折叠并展开表格行，但如果所有行都展开，我尝试折叠“最高级别”节点，它只会折叠第一个子节点，但不会折叠更深层次。

如何确保它崩溃整个级别？

我想过使用nextAll('tr[data-parent-id]').each(function ....的东西。

使表行可以与jQuery折叠

0 个答案: