jQuery展开/折叠分层表行 [英] jQuery expand/collapse hierarchical table row

问题描述

我正在寻找一种使用jQuery扩展/折叠分层表行的有效方法。问题是，展开和折叠功能不同。

I am looking for an efficient way to expand/collapse hierarchical table rows using jQuery. The problem is, that the expand and collapse functionality differs.

• 最初，只有类 level_0 显示，所有其他行都被隐藏。


• 展开应该只显示下一个级别，因此点击行 id = 10 应该只生成 id = 11 和 id = 14 可见的行。 / li>
  
• 崩溃另一方面，应该折叠所有连续行，其行的级别比当前行更深。例如，单击行 id = 10 上的折叠应隐藏具有ids 11,12,13,14 的行，如果它们是可见的。

• Initially, only rows with class level_0 are show, all other rows are hidden.
• expand should only show the next level, so clicking on row id=10 should only make rows with id=11 and id=14 visible.
• collapse on the other hand, should collapse all consecutive rows with a deeper level than the current one. For example, clicking collapse on row id=10 should hide rows with ids 11, 12, 13, 14, if they are visible.

表数据如下所示：

<table id="mytable">
    <tr class="level_0" id="10">...</td>
    <tr class="level_1 parent_10" id="11">...</td>
    <tr class="level_2 parent_11" id="12">...</td>
    <tr class="level_2 parent_11" id="13">...</td>
    <tr class="level_1 parent_10" id="14">...</td>
    <tr class="level_0" id="15">...</td>
</table>

---

我的非工作解决方案：

---

My non-working solution:

$('#mytable tr').live('click', function() {
  var toggleClass = 'parent_' + $(this).attr('id');
  $(this).nextAll('tr').each(function() {
    if ($(this).is('.'+toggleClass)) {
      $(this).toggleClass("showme");
    }
  });
});

问题是，它只会折叠下一行级别。点击行下方的可见和更深级别的行仍然显示。

The problem is, that it only collapses the next level rows. Visible and deeper level rows beneath the clicked row are still shown.

任何人都可以给我一些关于我如何做的提示这有效吗？如果需要，可以调整HTML代码。

Can anyone give me some hints on how I could do this in an efficient way? The HTML code can be adjusted if needed.

感谢任何提示。

推荐答案

帖子中的表格html无效（由td括起来）。在结构合理的表上，此代码有效。

The table html in your post is not valid (tr enclosed by td). On the properly structured table, this code works.

$("tr.level_0").live("click", function () {
  $(this).nextUntil(".level_0").toggle();
});

这篇关于jQuery展开/折叠分层表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！