如何在表格行上使用 slideDown（或显示）功能？
Posted
技术标签:
【中文标题】如何在表格行上使用 slideDown（或显示）功能？【英文标题】：How to Use slideDown (or show) function on a table row? 【发布时间】：2010-10-02 19:30:21 【问题描述】：我正在尝试向表格中添加一行并将该行滑入视图中，但是滑动功能似乎正在向表格行添加 display:block 样式，这会打乱布局。
任何想法如何解决这个问题？
代码如下：
$.get('/some_url',
'val1': id ,
function (data)
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
);
【问题讨论】：
必须是一张桌子吗？我认为没有桌子会容易得多。fadeIn 和 fadeOut 在表格行上工作并制作出很好的替代视觉效果（仅在 Firefox 上测试）
【参考方案1】：
您可以尝试将行的内容包装在 <span> 中，并让您的选择器为 $('#detailed_edit_row span'); - 有点骇人听闻，但我刚刚对其进行了测试，它可以工作。我也尝试了上面的table-row 建议，但似乎没有用。
更新：我一直在解决这个问题，从所有迹象来看，jQuery 需要它执行 slideDown 的对象是一个块元素。所以，没有骰子。我能够变出一个表格，在其中我在单元格上使用了 slideDown 并且它根本不影响布局，所以我不确定你的设置是如何设置的。我认为您唯一的解决方案是重构表格，使该单元格可以作为一个块，或者只是 .show(); 该死的东西。祝你好运。
【讨论】：
您不能为 tr 和 td 标签设置动画。您必须用 div 包装每个 td 的内容，然后为 div 设置动画，然后隐藏/显示 tr：<td><div style="display:block">contents</div></td>【参考方案2】：
表格行不支持动画。
来自 Chaffer 和 Swedberg 的“Learning jQuery”
表格行呈现特定的 动画的障碍，因为浏览器 使用不同的值（表行和 块）为他们的可见显示 财产。 .hide() 和 .show() 方法，没有动画，总是 可以安全地与表格行一起使用。作为 jQuery 版本 1.1.3，.fadeIn() 和 .fadeOut() 也可以使用。
您可以将您的 td 内容包装在一个 div 中并在其上使用 slideDown。您需要确定动画是否值得额外标记。
【讨论】：
效果很好！还有一个小问题：如果有的话，您还必须为单元格填充设置动画。但这也没什么大不了的。 您可以像这样为填充设置动画：$('tr').find('td').animate(padding: '0px', duration: 200);
@Emily：您能否指出 jQuery 源代码的特定行？我很想破解我的项目的源代码。
不是一个直接的答案，但我发现在大多数情况下使用 fadeIn / fadeOut 几乎一样好，而且它似乎在表格行上工作正常。
@PhilLaNasa 起初我就像“不，那看起来不太好”，但后来我试了一下，它看起来真的很棒！感谢您的旅行！【参考方案3】：
我回答这个问题有点落伍了，但我找到了办法:)
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 的扩展，整行都会下降。 然后告诉它在再次隐藏表格行之前淡出（然后超时，以便您看到效果）:)
希望这对某人有所帮助！
【讨论】：
【参考方案4】：有一个带有嵌套表格的表格行：
<tr class='dummyRow' style='display: none;'>
<td>
<table style='display: none;'>All row content inside here</table>
</td>
</tr>
致slideDown行：
$('.dummyRow').show().find("table").slideDown();
注意：在动画开始之前，行和它的内容（这里是"table"）都应该是hidden。
致slideUp行：
$('.dummyRow').find("table").slideUp('normal', function()$('.dummyRow').hide(););
第二个参数（function()）是回调。
简单！！
请注意，还有几个options 可以作为上/下滑动函数的参数添加（最常见的是'slow' 和'fast' 的持续时间）。
【讨论】：
你是否真的把你的内容放在你的行之间，或者那是一个错字？【参考方案5】：我只是动态地包装 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 致敬，因为我拿走了他的插件并将其剥离回到上面，干杯伙伴。
【讨论】：
谢谢！不知何故这对我有用： row.find('td').wrapInner('').parent().prependTo('#MainTable > tbody').find(' td > div').slideDown('slow', function() var $set = $(this);$set.replaceWith($set.contents());); 唯一的问题是单元格之间有一点延迟。【参考方案6】：如果您需要同时滑动和淡化表格行，请尝试使用这些：
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');
);
);
);
【讨论】：
【参考方案7】：这是我为此编写的一个插件，它需要 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
希望这对某人有所帮助。
【讨论】：
如果我想添加/删除一组行怎么办？我需要提供主/详细功能 回调函数立即为我触发。 这只是单纯的炫耀。虽然效果很棒（尽管尚未测试回调功能）。总有一天我会知道足够多的 jQuery 能够对其进行逆向工程。 仅供参考：如果目标行的内容是另一个表，这似乎会中断。我没有时间再进一步了，但我发现它折叠了子表，将所有行设置为隐藏，添加了一些奇怪的填充，然后一旦你调用 slideRow 它就不会重新展开这些行（“下降”）。 我遇到了和其他人一样的问题，在调用 slideRow('up') 和 slideRow('down') 时，子表表现得很有趣。我发现这是因为在插件中使用了两次 find('td') 方法。我将其更改为 children('td')，问题立即消失。对于 th 单元格的问题，只需将 children('td') 的两个实例都更新为 children('td, th')。【参考方案8】：我已经通过使用行中的 td 元素解决了这个问题：
$(ui.item).children("td").effect("highlight", color: "#4ca456" , 1000);
动画行本身会导致奇怪的行为，主要是异步动画问题。
对于上面的代码，我突出显示了在表格中拖放的一行，以突出显示更新已成功。希望这对某人有所帮助。
【讨论】：
我收到effect is not a function【参考方案9】：
我想滑动整个 tbody，我通过结合淡入淡出和滑动效果解决了这个问题。
我已分 3 个阶段完成此操作（如果您想向下或向上滑动，则替换第 2 步和第 3 步）
-
为 tbody 分配高度，
淡化所有 td 和 th，
滑动体。
上滑示例：
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function()
tbody.slideUp(300)
);
【讨论】：
这不会影响整个表格，而不仅仅是特定的行吗？【参考方案10】：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);
);
【讨论】：
【参考方案11】：我对提供的所有其他解决方案都有问题，但最终做了这个像黄油一样光滑的简单事情。
像这样设置你的 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。
【讨论】：
【参考方案12】：如果您将行中的 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;
【讨论】：
【参考方案13】：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();
);
);
【讨论】：
这会显示和隐藏包含表格的 div。不是 OP 要求的表格行。【参考方案14】：此代码有效！
<!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>
.mycolumnborder: 1px solid black;
.displaynonedisplay: none;
</style>
</head>
<body>
<table align="center" >
<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>
【讨论】：
【参考方案15】：像这样选择行的内容：
$(row).contents().slideDown();
.contents() - 获取匹配元素集中每个元素的子元素，包括文本和注释节点。
【讨论】：
您还必须选择列，例如$('tr > td').contents().slideDown()。确保列内的所有内容都包含在标签中，即 <td>Some text</td> 不起作用。这是最简单的解决方案。【参考方案16】：
我喜欢 Vinny 编写并一直在使用的插件。但是对于滑动行内的表格（tr/td），即使向上滑动，嵌套表格的行也总是隐藏起来。所以我在插件中做了一个快速简单的hack，不隐藏嵌套表的行。只需更改以下行
var $cells = $(this).find('td');
到
var $cells = $(this).find('> td');
它只找到直接的 td 而不是嵌套的。希望这对使用该插件并拥有嵌套表的人有所帮助。
【讨论】：
【参考方案17】：Vinny 提供的插件确实很接近，但我发现并修复了几个小问题。
-
它贪婪地将 td 元素作为目标，而不仅仅是隐藏行的子元素。如果它在显示这一行时找到了那些孩子，那就没问题了。当它接近时，它们都以“显示：无”结束，将它们隐藏起来。
它根本没有针对子元素。
对于具有大量内容的表格单元格（例如具有大量行的嵌套表格），调用 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);
【讨论】：
@circuitry，您有什么具体的建议或者您的批评是否足够？ @Oregoneff 说实话。我正在寻找更简单的东西。滑动表格行不需要 109 行代码。 @circuitry，如果您希望能够作为插件使用（而不仅仅是使用特定于使用的代码的不良做法）并具有控制速度的能力，那就再简单不过了，缓动，并在可定制的基础上进行回调。由于这是您将包含在代码库中的内容，并且可用于需要展开/折叠表行的任何实现，因此我不确定为什么它有 109 行代码很重要。 【参考方案18】：我想在#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);
【讨论】：
忘了说我还添加了儿童和修复程序【参考方案19】：我确实使用了这里提供的想法并遇到了一些问题。我把它们都修好了，我想分享一个流畅的单线。
$('#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 内容的高度很重要。
上滑速度很慢。如果你让它更慢，你可能会意识到一些小故障。开始时的小跳跃。这是因为提到的 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>
【讨论】：
这篇文章已经有两年了。我使用过 jquery 3.2.0 版。我今天用 Chrome 73.0.3683.75 测试了代码，它工作正常。【参考方案20】：快速/轻松修复：
使用 JQuery .toggle() 在点击 Row 或 Anchor 时显示/隐藏行。
需要编写一个函数来识别您想要隐藏的行，但切换会创建您正在寻找的功能。
【讨论】：
我认为这已经在this 回答中提出了...【参考方案21】：我需要一个带有隐藏行的表格，这些行在点击行时会滑入和滑出视图。
$('.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>【讨论】：
以上是关于如何在表格行上使用 slideDown（或显示）功能？的主要内容，如果未能解决你的问题，请参考以下文章