jQuery展开/折叠分层表行
我正在寻找一种使用jQuery扩展/折叠分层表行的有效方法。 问题是，扩展和折叠function不同。
- 最初，只显示类
level_0的行，所有其他行都被隐藏。 - expand应该只显示下一个级别，因此单击row
id=10应该只显示id=11且id=14。 - 另一方面，崩溃应该以比当前行更深的级别折叠所有连续行。 例如，单击行
id=10上的折叠应隐藏具有ID11, 12, 13, 14行（如果它们可见）。
表数据如下：
... ... ... ... ... ...
我的非工作解决方案：
$('#mytable tr').live('click', function() { var toggleClass = 'parent_' + $(this).attr('id'); $(this).nextAll('tr').each(function() { if ($(this).is('.'+toggleClass)) { $(this).toggleClass("showme"); } }); });
问题是，它只会折叠下一级行。 仍显示点击行下方的可见和更深级别的行。
谁能给我一些提示，告诉我如何以有效的方式做到这一点？ 如果需要，可以调整HTML代码。
谢谢你的任何提示。
post中的表格html无效（由td括起来）。 在结构合理的表上，此代码有效。
$("tr.level_0").live("click", function () { $(this).nextUntil(".level_0").toggle(); });
我想你需要更多一些代码，这样你就可以处理关闭和打开状态下所有行的点击。
我添加了一个类开关来指示行何时打开，并根据其状态以不同方式处理点击。 collapse和expand都有while循环遍历行，从紧跟在单击行之后的循环开始，并且当它们到达相同级别的行时它们停止。 这个逻辑应该适用于任何级别，而不仅仅是0.此外， while循环可能更清晰，使用带有花式选择器的nextUntil逻辑 – 我不熟悉jQuery方法，直到看到Jules回答 – 非常光滑！
另外，为了使这个示例代码更简单，我将您的级别类命名系统视为HTML数据属性，因此给定的行如下所示：
。 您可以使用代码替换对.data调用来解析您的类名。
var $rows = $('#mytable tr'); $rows.live('click', function() { $(this).toggleClass('open'); if ($this.hasClass('open')){ collapse($(this)); } else { expand($this); } } function collapse ($row) { $row.removeClass('open'); var rowIndex = $rows.index($row); var siblingOrAncestorRowFound = false; while (!siblingOrAncestorRowFound){ var $nextRow = $rows.eq(rowIndex + 1); if ($nextRow.level > $row.level){ $nextRow.hide().removeClass('open'); rowIndex++; } else { siblingOrAncestorRowFound = true; } } } function expand ($row) { $row.addClass('open') var rowIndex = $rows.index($row); var siblingOrAncestorRowFound = false; while (!siblingOrAncestorRowFound){ var $nextRow = $rows.eq(rowIndex + 1); if ($nextRow.level > $row.level){ // only show rows exactly one level below if ($nextRow.level == $row.level + 1){ $nextRow.show(); } rowIndex++; } else { siblingOrAncestorRowFound = true; } } }
（这没有经过测试 – 抱歉打算掏腰包！）
我已经为多个层次结构创建了一个版本作为另一个问题的答案 。
你的表的jQuery将是：
var treeTable = { parentClassPrefix : '', collapsedClass : 'collapsed', init : function(parentClassPrefix) { this.parentClassPrefix = parentClassPrefix; $('table').on('click', 'tr', function () { treeTable.toggleRowChildren($(this)); }); }, toggleRowChildren : function(parentRow) { var childClass = this.parentClassPrefix+parentRow.attr('id'); var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass); childrenRows.toggle(); childrenRows.each(function(){ if (!$(this).hasClass(treeTable.collapsedClass)) { treeTable.toggleRowChildren($(this)); } }); parentRow.toggleClass(this.collapsedClass); } }; treeTable.init('parent_');
看到这个JSFiddle工作。
最佳化
我有一个稍微不同的表结构，它涉及指定父项和子项，以便搜索更有效。
然后我还制作了一个jQuery层次表行，从中切换Gist并将其转换为带优化的客观化javascript。 优化来自http://24ways.org/2011/your-jquery-now-with-less-suck/ 。
特别：
表上的事件委托而不是行。
$('table').on('click', 'tr.'+treeTable.parentClass, function () { treeTable.toggleRowChildren($(this)); });
缓存子选择。
使用更快的元素选择器，然后在.childClass上使用更慢的filter
var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);