我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。
有什么解决办法吗?
代码如下:
$.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.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');
});
});
});
其他回答
您可以尝试将行内容包装在<span>中,并让您的选择器为$('#detailed_edit_row span');-有点粗糙,但我刚刚测试过,它是有效的。我还尝试了上面的表行建议,但它似乎不起作用。
更新:我一直在研究这个问题,从所有迹象来看,jQuery需要它执行slideDown的对象是一个块元素。所以,不可能。我能够变出一个表,我在一个单元格上使用滑下来,它不影响布局,所以我不确定你是如何设置的。我认为你唯一的解决方案是重构表,以这样一种方式,即单元格是一个块,或者只是.show();该死的东西。祝你好运。
在表行上不支持动画。
来自Chaffer和Swedberg的“学习jQuery”
表行显示特定的 动画的障碍,因为浏览器 使用不同的值(table-row和 块)用于它们的可见显示 财产。.hide()和.show() 方法,没有动画,总是 用于表行是安全的。的 jQuery 1.1.3版本,.fadeIn()和 . fadeout()也可以使用。
你可以把td的内容包装在一个div中,并在上面使用滑动。您需要决定动画是否值得额外的标记。
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();
}
});
});
快速、简单的解决办法:
使用JQuery .toggle()显示/隐藏行点击或锚。
需要编写一个函数来识别想要隐藏的行,但是toggle可以创建您正在寻找的功能。
我回答这个问题有点落后了,但我找到了一种方法来做到这一点:)
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展开,整行就会下降。 然后告诉它渐隐(然后超时,以便您看到效果),然后再次隐藏表行:)
希望这能帮助到一些人!