我正在尝试向表格添加一行并让该行滑入视图，但是下滑功能似乎正在向表格行添加一个 display:block 样式，这会弄乱布局。
任何想法如何解决这个问题？
这是代码：
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
表格行不支持动画。
来自 Chaffer 和 Swedberg 的“Learning jQuery”
表格行对动画提出了特殊的障碍，因为浏览器对其可见显示属性使用不同的值（表格行和块）。没有动画的 .hide() 和 .show() 方法始终可以安全地用于表格行。从 jQuery 版本 1.1.3 开始，也可以使用 .fadeIn() 和 .fadeOut()。
您可以将 td 内容包装在 div 中并在其上使用 slideDown 。您需要确定动画是否值得额外标记。
我只是动态地包装 tr，然后在 slideUp/slideDown 完成后将其删除。添加和删除一个或几个标签然后在动画完成后删除它们是一个非常小的开销，我根本看不到任何明显的滞后。
上滑：
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp(700, function(){
$(this).parent().parent().remove();
});
滑下：
$('#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 致敬，因为我拿走了他的插件并将其剥离回上面，干杯伙伴。
这是我为此编写的一个插件，它从 Fletch 的实现中需要一点，但我的仅用于向上或向下滑动一行（不插入行）。
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);
基本用法：
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
将幻灯片选项作为单独的参数传递：
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object
基本上，对于向下滑动动画，插件将单元格的内容包装在 DIV 中，对其进行动画处理，然后将其删除，反之亦然，对于向上滑动（需要一些额外的步骤来消除单元格填充）。它还返回您调用它的对象，因此您可以像这样链接方法：
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
希望这可以帮助某人。
我需要一个带有隐藏行的表格，这些行在行单击时滑入和滑出视图。
$('.tr-show-sub').click(function(e) {
var elOne = $(this);
$('.tr-show-sub').each(function(key, value) {
var elTwoe = $(this);
if(elOne.get(0) !== elTwoe.get(0)) {
if($(this).next('.tr-sub').hasClass('tr-sub-shown')) {
elTwoe.next('.tr-sub').removeClass('tr-sub-shown');
elTwoe.next('tr').find('td').find('div').slideUp();
elTwoe.next('tr').find('td').slideUp();
}
}
if(elOne.get(0) === elTwoe.get(0)) {
if(elOne.next('.tr-sub').hasClass('tr-sub-shown')) {
elOne.next('.tr-sub').removeClass('tr-sub-shown');
elOne.next('tr').find('td').find('div').slideUp();
elOne.next('tr').find('td').slideUp();
} else {
elOne.next('.tr-sub').addClass('tr-sub-shown');
elOne.next('tr').find('td').slideDown();
elOne.next('tr').find('td').find('div').slideDown();
}
}
})
});body {
background: #eee;
}
.wrapper {
margin: auto;
width: 50%;
padding: 10px;
margin-top: 10%;
}
table {
background: white;
width: 100%;
}
table th {
background: gray;
text-align: left;
}
table th, td {
border-bottom: 1px solid lightgray;
padding: 5px;
}
table .tr-show-sub {
background: #EAEAEA;
cursor: pointer;
}
table .tr-sub td {
display: none;
}
table .tr-sub td .div-sub {
display: none;
}<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="wrapper">
<table cellspacing="0" cellpadding="3">
<thead>
<tr class="table">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
</thead>
<tbody>
<tr class="tr-show-sub">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class="tr-sub">
<td colspan="5"><div class="div-sub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
</div></td>
</tr>
<tr class="tr-show-sub">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class="tr-sub">
<td colspan="5"><div class="div-sub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
</div></td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</tbody>
</table>
</div>您可以尝试将行的内容包装在 a 中<span>并让您的选择器成为$('#detailed_edit_row span');- 有点骇人听闻，但我刚刚测试过它并且它有效。我也尝试了table-row上面的建议，但似乎没有用。
更新：我一直在解决这个问题，从所有迹象来看，jQuery 需要它执行 slideDown 的对象作为块元素。所以，没有骰子。我能够变出一个表格，在其中我在单元格上使用了 slideDown 并且它根本不影响布局，所以我不确定你的设置是如何设置的。我认为您唯一的解决方案是重构表格，使该单元格可以成为一个块，或者只是.show();该死的东西。祝你好运。
我在回答这个问题时有点落后，但我找到了一种方法:)
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 的扩展，整行都会下降。然后告诉它在再次隐藏表格行之前淡出（然后超时，以便您看到效果）:)
希望这对某人有帮助！
有一个带有嵌套表的表行：
<tr class='dummyRow' style='display: none;'>
<td>
<table style='display: none;'>All row content inside here</table>
</td>
</tr>
$('.dummyRow').show().find("table").slideDown();
注意：该行和它的内容（这里是"table"）都应该在动画开始之前隐藏。
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
第二个参数 ( function()) 是一个回调。
简单的！！
请注意，还有几个选项可以作为向上/向下滑动功能的参数添加（最常见的是'slow'和的持续时间'fast'）。
我确实使用了这里提供的想法并遇到了一些问题。我把它们都修好了，并有一个我想分享的流畅的单线。
$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});
它在 td 元素上使用 css。它将高度降低到 0px。这样，只有每个 td 元素内新创建的 div-wrapper 内容的高度很重要。
slideUp 速度很慢。如果你让它更慢，你可能会意识到一些小故障。开始时的小跳跃。这是因为提到的 css 设置。但如果没有这些设置，该行的高度不会降低。只有它的内容会。
最后， tr 元素被删除。
整行只包含 JQuery，没有原生 Javascript。
希望能帮助到你。
这是一个示例代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"> </script>
</head>
<body>
<table>
<thead>
<tr>
<th>header_column 1</th>
<th>header column 2</th>
</tr>
</thead>
<tbody>
<tr id="row1"><td>row 1 left</td><td>row 1 right</td></tr>
<tr id="row2"><td>row 2 left</td><td>row 2 right</td></tr>
<tr id="row3"><td>row 3 left</td><td>row 3 right</td></tr>
<tr id="row4"><td>row 4 left</td><td>row 4 right</td></tr>
</tbody>
</table>
<script>
setTimeout(function() {
$('#row2').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});
}, 2000);
</script>
</body>
</html>
我已经通过使用行中的 td 元素解决了这个问题：
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
动画行本身会导致奇怪的行为，主要是异步动画问题。
对于上面的代码，我突出显示了在表格中拖放的一行，以突出显示更新已成功。希望这可以帮助某人。
我想滑动整个身体，我通过结合淡入淡出和幻灯片效果来解决这个问题。
我分 3 个阶段完成了此操作（如果您想向下或向上滑动，则替换第 2 和第 3 步）
上滑示例：
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
tbody.slideUp(300)
});
我对提供的所有其他解决方案都有问题，但最终做了这个像黄油一样光滑的简单事情。
像这样设置您的 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。
我喜欢 Vinny 编写并一直在使用的插件。但是对于滑动行内的表格（tr/td），即使向上滑动，嵌套表格的行也总是隐藏起来。所以我在插件中做了一个快速简单的 hack，不隐藏嵌套表的行。只需更改以下行
var $cells = $(this).find('td');
到
var $cells = $(this).find('> td');
它只找到直接的 td，而不是嵌套的。希望这可以帮助使用该插件并拥有嵌套表的人。
我想在#Vinny 的帖子中添加评论，但没有代表，所以必须发布答案...
发现你的插件有一个错误 - 当你只传递一个带有参数的对象时，如果没有传入其他参数，它们会被覆盖。通过更改处理参数的顺序轻松解决，代码如下。我还添加了一个选项，用于在关闭后销毁该行（仅当我需要它时！）： $('#row_id').slideRow('up', true); // 销毁行
(function ($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false,
destroyAfterUp: false
},
methods: {
up: function (arg1, arg2, arg3) {
if (typeof arg2 == 'string') {
sR.thisCallArgs.easing = arg2;
} else if (typeof arg2 == 'function') {
sR.thisCallArgs.callback = arg2;
} else if (typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if (typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
} else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
sR.thisCallArgs.callback = sR.defaults.callback;
}
if (typeof arg1 == 'object') {
for (p in arg1) {
sR.thisCallArgs[p] = arg1[p];
}
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'boolean')) {
sR.thisCallArgs.destroyAfterUp = arg1;
} else {
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
var $row = $(this);
var $cells = $row.children('th, td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'
}, {
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({ 'display': 'none' });
$(this).css({ 'padding': currentPadding });
}
});
var wait = setInterval(function () {
if ($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if (sR.thisCallArgs.destroyAfterUp)
{
$row.replaceWith('');
}
if (typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1, arg2, arg3) {
if (typeof arg2 == 'string') {
sR.thisCallArgs.easing = arg2;
} else if (typeof arg2 == 'function') {
sR.thisCallArgs.callback = arg2;
} else if (typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if (typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
} else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
sR.thisCallArgs.callback = sR.defaults.callback;
}
if (typeof arg1 == 'object') {
for (p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
} else {
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
var $cells = $(this).children('th, td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function () { $(this).replaceWith($(this).contents()); });
var wait = setInterval(function () {
if ($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if (typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function (method, arg1, arg2, arg3) {
if (typeof method != 'undefined') {
if (sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
}
};
})(jQuery);
如果您需要同时滑动和淡入表格行，请尝试使用这些：
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);
}
});
如果您将行中的 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;
}
}
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();
}
});
});
此代码有效！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title></title>
<script>
function addRow() {
$('.displaynone').show();
$('.displaynone td')
.wrapInner('<div class="innerDiv" style="height:0" />');
$('div').animate({"height":"20px"});
}
</script>
<style>
.mycolumn{border: 1px solid black;}
.displaynone{display: none;}
</style>
</head>
<body>
<table align="center" width="50%">
<tr>
<td class="mycolumn">Row 1</td>
</tr>
<tr>
<td class="mycolumn">Row 2</td>
</tr>
<tr class="displaynone">
<td class="mycolumn">Row 3</td>
</tr>
<tr>
<td class="mycolumn">Row 4</td>
</tr>
</table>
<br>
<button onclick="addRow();">add</button>
</body>
</html>
Vinny 提供的插件非常接近，但我发现并修复了几个小问题。
对于具有大量内容的表格单元格（例如具有大量行的嵌套表格），调用 slideRow('up')，无论提供的 slideSpeed 值如何，它会在填充动画完成后立即折叠该行的视图. 我修复了它，因此填充动画在包装上的 slideUp() 方法完成之前不会触发。
(function($){
var sR = {
defaults: {
slideSpeed: 400
, easing: false
, callback: false
}
, thisCallArgs:{
slideSpeed: 400
, easing: false
, callback: false
}
, methods:{
up: function(arg1, arg2, arg3){
if(typeof arg1 == 'object'){
for(p in arg1){
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined'){
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function'){
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).children('td, th');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){
$(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, {
complete: function(){
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({ 'display': 'none' });
$(this).css({ 'padding': currentPadding });
}
});
});
var wait = setInterval(function(){
if($cellContentWrappers.is(':animated') === false){
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function'){
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
, down: function (arg1, arg2, arg3){
if(typeof arg1 == 'object'){
for(p in arg1){
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined'){
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function'){
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).children('td, th');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function(){
if($cellContentWrappers.is(':animated') === false){
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function'){
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method, arg1, arg2, arg3){
if(typeof method != 'undefined'){
if(sR.methods[method]){
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
}
};
})(jQuery);