我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
当前回答
我回答这个问题有点落后了,但我找到了一种方法来做到这一点:)
function eventinfo(id) {
tr = document.getElementById("ei"+id);
div = document.getElementById("d"+id);
if (tr.style.display == "none") {
tr.style.display="table-row";
$(div).slideDown('fast');
} else {
$(div).slideUp('fast');
setTimeout(function(){tr.style.display="none";}, 200);
}
}
我只是在表格数据标记中放了一个div元素。当它被设置为可见时,随着div展开,整行就会下降。 然后告诉它渐隐(然后超时,以便您看到效果),然后再次隐藏表行:)
希望这能帮助到一些人!
其他回答
如果你把行中的td设置为不显示就可以了同时你开始动画行的高度
tbody tr{
min-height: 50px;
}
tbody tr.ng-hide td{
display: none;
}
tr.hide-line{
-moz-transition: .4s linear all;
-o-transition: .4s linear all;
-webkit-transition: .4s linear all;
transition: .4s linear all;
height: 50px;
overflow: hidden;
&.ng-hide { //angularJs specific
height: 0;
min-height: 0;
}
}
我简单地动态包装tr,然后删除它一旦slideUp/slideDown已经完成。这是一个非常小的开销添加和删除一个或两个标签,然后删除它们一旦动画完成,我没有看到任何可见的延迟。
SlideUp:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp(700, function(){
$(this).parent().parent().remove();
});
SlideDown:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: none;" />')
.parent()
.find('td > div')
.slideDown(700, function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
我不得不向fletchzone.com致敬,因为我拿走了他的插件,并将其剥离到上面。
快速、简单的解决办法:
使用JQuery .toggle()显示/隐藏行点击或锚。
需要编写一个函数来识别想要隐藏的行,但是toggle可以创建您正在寻找的功能。
我对所有其他的解决方案都有问题,但最后还是做了这个简单的事情,非常顺利。
像这样设置你的HTML:
<tr id=row1 style='height:0px'><td>
<div id=div1 style='display:none'>
Hidden row content goes here
</div>
</td></tr>
然后像这样设置你的javascript:
function toggleRow(rowid){
var row = document.getElementById("row" + rowid)
if(row.style.height == "0px"){
$('#div' + rowid).slideDown('fast');
row.style.height = "1px";
}else{
$('#div' + rowid).slideUp('fast');
row.style.height = "0px";
}
}
基本上,让“隐形”行高0px,里面有一个div。 使用div(不是行)上的动画,然后设置行高为1px。
为了再次隐藏行,在div上使用相反的动画,并将行高设置为0px。
我通过使用行中的td元素来解决这个问题:
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
动画行本身会导致奇怪的行为,主要是异步动画问题。
对于上面的代码,我突出显示了在表中拖放的一行,以突出显示更新已经成功。希望这能帮助到一些人。