我想创建一个具有以下结构的表:
Row1 datacolumn1 datacolumn2 datacolumn2
SubRow1 datacolumn1 datacolumn2 datacolumn2
SubRow2 datacolumn1 datacolumn2 datacolumn2
SubRow3 datacolumn1 datacolumn2 datacolumn2
我想在点击时展开/折叠子行。我似乎无法让它与表格一起使用。我知道列表是一个更好的选择,但表格更容易维护。
<tbody>
<tr class="row1 head1">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="row1 head2 closed">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="row1 head3">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="row1 head4">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="row1 head5">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="row2 head1">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="row2 head4">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="row2 head5">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr>
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr>
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
</tbody>
在行单击时,我调用以下函数:
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;
}
非常糟糕。我知道。 :)
答案 0 :(得分:8)
您可以为您调用父项的行创建一个类,为您调用子项的行创建一个类,并切换它们的显示。
以下是:
$(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();
})
});
})
答案 1 :(得分:0)
很难从这个例子中弄清楚你想要做什么。
你要做的事情应该相当简单 - 我要做的是从头开始重写,使用以下概念:
这样做,你应该有更少的代码,它应该更具可读性。
希望这会有所帮助......
答案 2 :(得分:0)
你可以这样做:
$('.mySelectorOfNOTSubRow').toggle(
function(){
$(this).nextUntil('.mySelectorOfNOTSubRow').show();
}, function(){
$(this).nextUntil('.mySelectorOfNOTSubRow').hide();
});
HTML:
<table>
<tbody>
<tr class="head"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="head"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="head"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="sub"><td></td></tr>
<tr class="sub"><td></td></tr>
...
</tbody>
</table>
CSS:
.sub{display: none;}
答案 3 :(得分:-1)
由于您已经在使用jQuery,因此可以使用插件datatales。
正如您在页面的示例部分所看到的那样,您正在尝试使用代码实现的目标。