有一个表行嵌套表:

<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())是一个回调。

简单! !

请注意，还有几个选项可以添加为滑动上/下函数的参数(最常见的是“慢”和“快”的持续时间)。

我简单地动态包装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致敬，因为我拿走了他的插件，并将其剥离到上面。

我需要一个表与隐藏的行，滑进和退出对行单击视图。

$('.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>

Vinny提供的插头非常接近，但我发现并修复了一些小问题。

It greedily targeted td elements beyond just the children of the row being hidden. This would have been kind of ok if it had then sought out those children when showing the row. While it got close, they all ended up with "display: none" on them, rendering them hidden. It didn't target child th elements at all. For table cells with lots of content (like a nested table with lots of rows), calling slideRow('up'), regardless of the slideSpeed value provided, it'd collapse the view of the row as soon as the padding animation was done. I fixed it so the padding animation doesn't trigger until the slideUp() method on the wrapping is done. (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);

有一个表行嵌套表:

<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())是一个回调。

简单! !

请注意，还有几个选项可以添加为滑动上/下函数的参数(最常见的是“慢”和“快”的持续时间)。

我想滑动整个身体，我已经通过结合褪色和滑动效果来管理这个问题。

我已经完成了3个阶段(第2步和第3步被替换，以防你想向下或向上滑动)

给身体指定高度， 褪色所有td和th， tbody下滑。

slideUp的例子:

tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
    tbody.slideUp(300)
});