我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。
有什么解决办法吗?
代码如下:
$.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);
}
);
当前回答
快速、简单的解决办法:
使用JQuery .toggle()显示/隐藏行点击或锚。
需要编写一个函数来识别想要隐藏的行,但是toggle可以创建您正在寻找的功能。
其他回答
如果你把行中的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致敬,因为我拿走了他的插件,并将其剥离到上面。
您可以尝试将行内容包装在<span>中,并让您的选择器为$('#detailed_edit_row span');-有点粗糙,但我刚刚测试过,它是有效的。我还尝试了上面的表行建议,但它似乎不起作用。
更新:我一直在研究这个问题,从所有迹象来看,jQuery需要它执行slideDown的对象是一个块元素。所以,不可能。我能够变出一个表,我在一个单元格上使用滑下来,它不影响布局,所以我不确定你是如何设置的。我认为你唯一的解决方案是重构表,以这样一种方式,即单元格是一个块,或者只是.show();该死的东西。祝你好运。
我想滑动整个身体,我已经通过结合褪色和滑动效果来管理这个问题。
我已经完成了3个阶段(第2步和第3步被替换,以防你想向下或向上滑动)
给身体指定高度, 褪色所有td和th, tbody下滑。
slideUp的例子:
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
tbody.slideUp(300)
});
http://jsfiddle.net/PvwfK/136/
<table cellspacing='0' cellpadding='0' class='table01' id='form_table' style='width:100%;'>
<tr>
<td style='cursor:pointer; width:20%; text-align:left;' id='header'>
<label style='cursor:pointer;'> <b id='header01'>▲ Customer Details</b>
</label>
</td>
</tr>
<tr>
<td style='widtd:20%; text-align:left;'>
<div id='content' class='content01'>
<table cellspacing='0' cellpadding='0' id='form_table'>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
<tr>
<td>A/C ID</td>
<td>:</td>
<td>3000/A01</td>
</tr>
</table>
</div>
</td>
</tr>
$(function () {
$(".table01 td").on("click", function () {
var $rows = $('.content01');
if ($(".content01:first").is(":hidden")) {
$("#header01").text("▲ Customer Details");
$(".content01:first").slideDown();
} else {
$("#header01").text("▼ Customer Details");
$(".content01:first").slideUp();
}
});
});