我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。
有什么解决办法吗?
代码如下:
$.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);
}
);
当前回答
您可以尝试将行内容包装在<span>中,并让您的选择器为$('#detailed_edit_row span');-有点粗糙,但我刚刚测试过,它是有效的。我还尝试了上面的表行建议,但它似乎不起作用。
更新:我一直在研究这个问题,从所有迹象来看,jQuery需要它执行slideDown的对象是一个块元素。所以,不可能。我能够变出一个表,我在一个单元格上使用滑下来,它不影响布局,所以我不确定你是如何设置的。我认为你唯一的解决方案是重构表,以这样一种方式,即单元格是一个块,或者只是.show();该死的东西。祝你好运。
其他回答
我简单地动态包装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();该死的东西。祝你好运。
像这样选择行内容:
$(row).contents().slideDown();
.contents () - 获取匹配元素集中每个元素的子元素,包括文本节点和注释节点。
如果你需要同时滑动和淡出一个表行,尝试使用这些:
jQuery.fn.prepareTableRowForSliding = function() {
$tr = this;
$tr.children('td').wrapInner('<div style="display: none;" />');
return $tr;
};
jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
$tr = this;
if ($tr.is(':hidden')) {
$tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
} else {
$tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
$tr.hide();
callback();
});
}
return $tr;
};
$(document).ready(function(){
$('tr.special').hide().prepareTableRowForSliding();
$('a.toggle').toggle(function(){
$button = $(this);
$tr = $button.closest('tr.special'); //this will be specific to your situation
$tr.slideFadeTableRow(300, 'swing', function(){
$button.text('Hide table row');
});
}, function(){
$button = $(this);
$tr = $button.closest('tr.special'); //this will be specific to your situation
$tr.slideFadeTableRow(300, 'swing', function(){
$button.text('Display table row');
});
});
});
function hideTr(tr) {
tr.find('td').wrapInner('<div style="display: block;" />').parent().find('td > div').slideUp(50, function () {
tr.hide();
var $set = jQuery(this);
$set.replaceWith($set.contents());
});
}
function showTr(tr) {
tr.show()
tr.find('td').wrapInner('<div style="display: none;" />').parent().find('td > div').slideDown(50, function() {
var $set = jQuery(this);
$set.replaceWith($set.contents());
});
}
你可以使用以下方法:
jQuery("[data-toggle-tr-trigger]").click(function() {
var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
if($tr.is(':hidden')) {
showTr($tr);
} else {
hideTr($tr);
}
});