[英]Hide All Descendent Table Rows
I am working with jQuery in trying to toggle the children tr's of a parent tr. 我正在与jQuery合作,尝试切换父级tr的子级tr。
This is working for one tr level at a time; 这一次只工作一个tr级别; however, when an inner tr collapses its children and then the outer one does the same, the children of the inner tr remain visible.
但是,当一个内部tr的子项折叠而外部一个TR相同时,内部tr的子项仍然可见。
I want all descendents (the Level 2 and Level 3 classes) to be hidden when the Level 1 class is clicked, and I want the Level 3 class to be hidden when the Level 2 class is clicked. 我希望在单击“级别1”类时隐藏所有后代(“级别2”和“级别3”类),并且希望在单击“级别2”时隐藏“级别3”类。
Here's the code I've been using. 这是我一直在使用的代码。
$(".mainTable td[class^='Level1']").each(function() {
//copy td class to tr
$(this).parent().addClass($(this).attr('class'));
//add function to tr
$(this).parent().click(function() {
//toggle all elements to next Level1 class
$(this).nextUntil("[class^='Level1']").toggle();
});
});
$(".mainTable td[class^='Level2']").each(function() {
//copy td class to tr
$(this).parent().addClass($(this).attr('class'));
//add function to tr
$(this).parent().click(function() {
//toggle all elements to next Level1 class
$(this).nextUntil("[class^='Level1']").toggle();
});
});
Here is the HTML: 这是HTML:
<table class="mainTable">
<tbody>
<tr><td class="Level1">Level 1</td></tr>
<tr><td class="Level1">Level 1</td></tr>
<tr><td class="Level2">Level 2</td></tr>
<tr><td class="Level3">Level 3</td></tr>
<tr><td class="Level1">Level 1</td></tr>
<tr><td class="Level1">Level 1</td></tr>
<tr><td class="Level2">Level 2</td></tr>
</tbody>
</table>
Thanks for any help. 谢谢你的帮助。
You can make this code more DRY. 您可以使此代码更干燥。 This should work for any levels depth.
这应该适用于任何级别的深度。 Demo .
演示
function getLevel(el) { //extract level as integer from classname
var level = /Level(\d+)/.exec(el.className)
return level != null ? parseInt(level[1], 10) : NaN;
}
$('.mainTable').on('click', 'td', function() { //use event delegation
var level = getLevel(this), //get current level
parent, state;
if(level == level) { //checking for NaN
parent = $(this).parent('tr'); //get parent
state = !!parent.data('state'); //get current state
parent.nextUntil(function(_, item) { //filter lower levels
return getLevel(item.cells[0]) <= level;
})
.each(function(_, item) {
$(item).data('state', !state)
.toggle(state);
}); //show|hide
parent.data('state', !state); //save current state.
}
});
If you can modify html you can greatly reduce code complexity by using data attributes. 如果可以修改html,则可以使用数据属性极大地降低代码复杂度。
<tr data-level="1">...</tr>
<tr data-level="3">...</tr>
Specifying levels like this you will eliminate all the string manipulations required to extract level in a form of number. 像这样指定级别,您将消除提取数字形式的级别所需的所有字符串操作。
This should do the job: 这应该做的工作:
$(".mainTable td[class^=Level]").each(function() {
$(this).parent().addClass($(this).attr('class'));
});
$(".mainTable tr[class^=Level1]").click(function() {
var items = $(this).nextUntil("[class^=Level1]");
if (items.filter(':hidden').length > 0) {
items.show();
}
else {
items.hide();
}
});
$(".mainTable tr[class^=Level2]").click(function() {
$(this).nextUntil("[class^=Level1], [class^=Level2]").toggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.