Javascript - 展开/折叠表格行

Question

鉴于下表/代码，我想添加两项。我不太了解 JavaScript，这段代码是另一个程序员留下的。该代码在所有其他方面都按预期工作。

这是两个项目:

1. 表格应该以折叠状态开始。所有节点都应该是崩溃到“祖 parent ”级别。
2. 应该有一个“全部展开”链接和一个单独的“全部折叠”链接。

这是我正在使用的表格:

$(function() {
        $('#mytable').on('click', '.toggle', function () {
            var findChildren = function (tr) {
                var depth = tr.data('depth');
                return tr.nextUntil($('tr').filter(function () {
                    return $(this).data('depth') <= depth;
                }));
            };
    
            var el = $(this);
            var tr = el.closest('tr');
            var children = findChildren(tr);
    
            var subnodes = children.filter('.expand');
            subnodes.each(function () {
                var subnode = $(this);
                var subnodeChildren = findChildren(subnode);
                children = children.not(subnodeChildren);
            });
    
            if (tr.hasClass('collapse')) {
                tr.removeClass('collapse').addClass('expand');
                children.hide();
            } else {
                tr.removeClass('expand').addClass('collapse');
                children.show();
            }
            return children;
        });
    });

table td, th {
        border: 1px solid #eee;
        font-family: Arial;
        font-size: 16px;
    }
    .level0 td:first-child {
        padding-left: 5px;
    }
    .level1 td:first-child {
        padding-left: 25px;
    }
    .level2 td:first-child {
        padding-left: 50px;
    }
    .level3 td:first-child {
        padding-left: 75px;
    }
    
    .collapse .toggle {
        background: url("open.gif");
        background-repeat: no-repeat;
    }
    .expand .toggle {
        background: url("closed.gif");
        background-repeat: no-repeat;
    }
    .toggle {
        height: 20px;
        width: 20px;
        display: inline-block;
    }
    .age {
            text-align: center;
    }
    .nam {
            text-align: left;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="mytable" style="border-collapse: collapse" cellpadding="6">
        <thead>
        <tr>
            <th width="250px">Type</th>
            <th width="50px">Age</th>
            <th width="50px">Name</th>
        </tr>
        </thead>
    
        <tr data-depth="0" class="collapse level0">
            <td><span class="toggle collapse"></span>GRANDPARENT</td>
            <td class="age">80</td>
            <td class="nam">Ethel</td>
        </tr>
    
        <tr data-depth="1" class="collapse level1">
            <td><span class="toggle"></span>CHILD 1</td>
            <td class="age">55</td>
            <td class="nam">Susan</td>
        </tr>
    
        <tr data-depth="2" class="collapse level2">
            <td><span class="toggle collapse"></span>GRANDCHILD 1</td>
            <td class="age">32</td>
            <td class="nam">Kristen</td>
        </tr>
    
        <tr data-depth="3" class="collapse collapsable level3">
            <td>GREAT GRANCHILD 1</td>
            <td class="age">12</td>
            <td class="nam">Layla</td>
        </tr>
    
        <tr data-depth="1" class="collapse collapsable level1">
            <td><span class="toggle collapse"></span>CHILD 2</td>
            <td class="age">52</td>
            <td class="nam">Joanne</td>
        </tr>
    
        <tr data-depth="2" class="collapse collapsable level2">
            <td><img src="list.gif"/>GRANDCHILD 2</td>
            <td class="age">28</td>
            <td class="nam">Marie</td>
        </tr>
    
    </table>

我需要向 JavaScript 添加什么才能完成此操作？

Answer 1

这是你想要的结果吗？
(我对您的代码进行了一些调整，使它或多或少像我认为的那样工作。)

反正做了什么我也不是很明白，建议你只用JS解决。
但是……我认为可以修改 tr 中的类，以便在加载页面时获得“全部隐藏”的结果，而无需使用任何 JS。
我评论了我添加新东西的地方:
编辑:我也清理了一点代码。

$('.collapse').on('click', function() {
  //console.log($(this).attr('data-depth'));
  var findChildren = function(tr) {
    var depth = tr.data('depth');
    return tr.nextUntil($('tr').filter(function() {
      return $(this).data('depth') <= depth;
    }));
  };

  var children = findChildren($(this));
  if ($(children).is(':visible')) {
    $(this).addClass("closed");
    $(children).hide();
  } else {
    $(this).removeClass("closed");
    $(children).show();
    var children = findChildren($(".closed"));
    $(children).hide();
  }

});


// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
  $("#mytable tr.collapse").removeClass("closed").show();
});
$('#hide_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
  $("#mytable tr.collapse.level0").addClass("closed");
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});

table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}

.level0 td:first-child {
  padding-left: 10px;
}

.level1 td:first-child {
  padding-left: 30px;
}

.level2 td:first-child {
  padding-left: 50px;
}

.level3 td:first-child {
  padding-left: 70px;
}

.age {
  text-align: center;
}

.nam {
  text-align: left;
}

.closed td:first-child::before {
  content: "• ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HERE IS THE HTML I ADDED FOR THE BUTTONS -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->

<table id="mytable" style="border-collapse: collapse" cellpadding="6">
  <thead>
    <tr>
      <th width="250px">Type</th>
      <th width="50px">Age</th>
      <th width="50px">Name</th>
    </tr>
  </thead>

  <tr data-depth="0" class="collapse level0">
    <td>GRANDPARENT</td>
    <td class="age">80</td>
    <td class="nam">Ethel</td>
  </tr>

  <tr data-depth="1" class="collapse level1">
    <td>CHILD 1</td>
    <td class="age">55</td>
    <td class="nam">Susan</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td>GRANDCHILD 1</td>
    <td class="age">32</td>
    <td class="nam">Kristen</td>
  </tr>

  <tr data-depth="3" class="collapse level3">
    <td>GREAT GRANCHILD 1</td>
    <td class="age">12</td>
    <td class="nam">Layla</td>
  </tr>

  <tr data-depth="1" class="collapse level1">
    <td>CHILD 2</td>
    <td class="age">52</td>
    <td class="nam">Joanne</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td>GRANDCHILD 2</td>
    <td class="age">28</td>
    <td class="nam">Marie</td>
  </tr>

</table>

这是我上一版之前的片段，以防“清理过”的版本不符合您的需求:

$('.collapse').on('click', function() {
  //console.log($(this).attr('data-depth'));
  var findChildren = function(tr) {
    var depth = tr.data('depth');
    return tr.nextUntil($('tr').filter(function() {
      return $(this).data('depth') <= depth;
    }));
  };

  var children = findChildren($(this));
  if ($(children).is(':visible')) {
    $(children).hide();
  } else {
    $(children).show();
  }

});


// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").show();
});
$('#hide_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});

table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}

.level0 td:first-child {
  padding-left: 5px;
}

.level1 td:first-child {
  padding-left: 25px;
}

.level2 td:first-child {
  padding-left: 50px;
}

.level3 td:first-child {
  padding-left: 75px;
}

.collapse .toggle {
  background: url("open.gif");
  background-repeat: no-repeat;
}

.expand .toggle {
  background: url("closed.gif");
  background-repeat: no-repeat;
}

.toggle {
  height: 20px;
  width: 20px;
  display: inline-block;
}

.age {
  text-align: center;
}

.nam {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HERE IS THE HTML I ADDED -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->

<table id="mytable" style="border-collapse: collapse" cellpadding="6">
  <thead>
    <tr>
      <th width="250px">Type</th>
      <th width="50px">Age</th>
      <th width="50px">Name</th>
    </tr>
  </thead>

  <tr data-depth="0" class="collapse level0">
    <td><span class="toggle collapse"></span>GRANDPARENT</td>
    <td class="age">80</td>
    <td class="nam">Ethel</td>
  </tr>

  <tr data-depth="1" class="collapse level1">
    <td><span class="toggle"></span>CHILD 1</td>
    <td class="age">55</td>
    <td class="nam">Susan</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td><span class="toggle collapse"></span>GRANDCHILD 1</td>
    <td class="age">32</td>
    <td class="nam">Kristen</td>
  </tr>

  <tr data-depth="3" class="collapse collapsable level3">
    <td>GREAT GRANCHILD 1</td>
    <td class="age">12</td>
    <td class="nam">Layla</td>
  </tr>

  <tr data-depth="1" class="collapse collapsable level1">
    <td><span class="toggle collapse"></span>CHILD 2</td>
    <td class="age">52</td>
    <td class="nam">Joanne</td>
  </tr>

  <tr data-depth="2" class="collapse collapsable level2">
    <td><img src="list.gif" />GRANDCHILD 2</td>
    <td class="age">28</td>
    <td class="nam">Marie</td>
  </tr>

</table>