展开/折叠具有嵌套行的表行
我想创建一个具有以下结构的表：
Row1 datacolumn1 datacolumn2 datacolumn2
SubRow1 datacolumn1 datacolumn2 datacolumn2
SubRow2 datacolumn1 datacolumn2 datacolumn2
SubRow3 datacolumn1 datacolumn2 datacolumn2
我想在点击时展开/折叠子行。 我似乎无法让它与表格一起使用。 我知道列表是一个更好的选择，但表更容易维护。
Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 Cash and Equivalents 000,000 000,000 在行上单击，我调用以下函数：
holdingsTree: function(that){ var stack = '', classes = ba.splitClasses(that.attr('class')), nextRow = ba.getClassNumber(classes[1], "head"); if (that.next().hasClass('head'+nextRow)){ if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); } else if (that.next().hasClass(classes[0])){ stack = that.nextUntil('.head1'); $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow))){ $(this).show().addClass('open').removeClass('closed'); } }); } } else if (that.next().hasClass('head'+ (nextRow+1))){ if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); } else if (that.next().hasClass(classes[0])){ stack = that.nextUntil('.head1'); $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+1))){ $(this).show().addClass('open').removeClass('closed'); } }); } } else if (that.next().hasClass('head'+ (nextRow+2))){ if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); return; } else if (that.next().hasClass(classes[0])){ stack = that.nextUntil('.head'+ (nextRow+3)); $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+2))){ $(this).show().addClass('open').removeClass('closed'); } }); //stack.find('.head'+(nextRow+2)).show().addClass('open').removeClass('closed'); } } else if (that.next().hasClass('head'+ (nextRow+3))){ if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); } else if (that.next().hasClass(classes[0])){ stack = that.nextUntil('.head1'); $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+3))){ $(this).show().addClass('open').removeClass('closed'); } }); } } else if (that.next().hasClass('head'+ (nextRow+4))){ if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); } else if (that.next().hasClass(classes[0])){ that.nextUntil('.head1').show().addClass('open').removeClass('closed'); } } }, splitClasses: function(names){ var names = names.split(' '); return names; }, getClassNumber: function(name, pretext){ var result = name.split(pretext); console.log(parseInt(result[1]) + 1); return parseInt(result[1]) + 1; }
这很糟糕。 我知道。 🙂
您可以为您调用父项的行创建一个类，为您调用子项的行创建一个类，并切换它们的显示。
这是如何做：
$(document).ready(function() { function getChildren($row) { var children = []; while($row.next().hasClass('child')) { children.push($row.next()); $row = $row.next(); } return children; } $('.parent').on('click', function() { var children = getChildren($(this)); $.each(children, function() { $(this).toggle(); }) }); })
检查这个小提琴的完整运行代码http://jsfiddle.net/T8t2r/3/如果这解决了你的问题，请接受答案！
祝好运！
编辑：在更多级别上工作，一种方法是拥有一个级别属性。 所以这里是更新版本，应该适用于任何级别。 http://jsfiddle.net/T8t2r/9/
$(document).ready(function() { function getChildren($row) { var children = [], level = $row.attr('data-level'); while($row.next().attr('data-level') > level) { children.push($row.next()); $row = $row.next(); } return children; } $('.parent').on('click', function() { var children = getChildren($(this)); $.each(children, function() { $(this).toggle(); }) }); })
从这个例子中很难弄清楚你想要做什么。
你要做的事情应该是相当简单的 – 我要做的是从头开始重写，使用以下概念：
- 为每个可点击的项目（行）提供自己的ID，但将它们全部放在一个“可点击”的课程中
- 根据可点击父项的ID为每个子行提供一个类 – 例如'[id] -sub’
- 在’clickable’类上设置click事件，您可以在其中确定单击的Item ID，并使用它来切换（隐藏/显示）具有类'[clicked ID] -sub’的所有行
这样做，你应该有更少的代码，它应该更具可读性。
希望这可以帮助…
你可以这样做：
$('.mySelectorOfNOTSubRow').toggle( function(){ $(this).nextUntil('.mySelectorOfNOTSubRow').show(); }, function(){ $(this).nextUntil('.mySelectorOfNOTSubRow').hide(); });
HTML：
CSS：
.sub{display: none;}
小提琴
由于您已经在使用jQuery，因此您可以使用插件数据库 。
正如您在页面的示例部分中所看到的，这正是您尝试使用代码实现的目标。