如何在表行上使用slideDown（或show）函数？
我想添加一行到一个表，并将该行滑入视图，但滑动function似乎是添加一个显示：块样式的表格行弄乱布局。
任何想法如何解决这个问题？
代码如下：
$.get('/some_url', { 'val1': id }, function (data) { var row = $('#detailed_edit_row'); row.hide(); row.html(data); row.slideDown(1000); } ); 表格行不支持animation。
来自Chaffer和Swedberg的“学习jQuery”
表格行给animation带来了特别的障碍，因为浏览器对于其可见的显示属性使用不同的值（表格行和块）。 没有animation的.hide（）和.show（）方法总是可以安全地用于表格行。 从jQuery版本1.1.3开始，也可以使用.fadeIn（）和.fadeOut（）。
你可以把你的TD内容包装在div中，并使用slideDown。 你需要决定animation是否值得额外的标记。
我只是dynamic地包装tr，然后在slideUp / slideDown完成后将其删除。 这是一个非常小的开销，添加和删除一个或几个标签，然后删除它们，一旦animation完成，我没有看到任何可见的滞后。
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(); });
滑下：
$('#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');
将滑动选项作为单个parameter passing：
$('#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
基本上，对于向下滑动animation，插件将DIV中单元格的内容包装起来，对它们进行animation处理，然后移除它们，反之亦然，以便向上滑动（用一些额外的步骤来摆脱单元格填充）。 它也返回你调用它的对象，所以你可以像这样链接方法：
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
希望这有助于某人。
你可以尝试在<span>包装行的内容，让你的select符是$('#detailed_edit_row span'); – 有点骇人听闻，但我只是testing它，它的工作原理。 我也尝试了上面的table-rowbuild议，似乎没有工作。
更新 ：我一直在玩这个问题，并从所有迹象jQuery需要它执行slideDown的对象是一个块元素。 所以，没有骰子。 我能够变出一张桌子，我在一个单元格上使用了slideDown，并且完全不影响布局，所以我不确定你是如何设置的。 我认为你唯一的解决scheme是以这样的方式来重构表格，即单元格可以是块，或者只是.show(); 该死的东西。 祝你好运。
我有点落后于回答这个问题，但我find了一个办法:)
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的扩展，整行下降。 然后告诉它淡出备份（然后超时，所以你看到的效果），再次隐藏表格行:)
希望这可以帮助别人！
select这样的行的内容：
$(row).contents().slideDown();
.contents（） – 获取匹配元素集中每个元素的子元素，包括文本和注释节点。
我是这个社区的新手。 比率我的答案。 🙂
你可以find这个工作正常。
我有一个表（ <table style='display: none;'></table> ）
在<tr class='dummyRow' style='display: none;'><td></td></tr> 。
向下滑动该行
$('.dummyRow').show().find("table").slideDown();
注意：行和行内的内容（这里是table ）都应该在animation开始之前隐藏。
向上滑动
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
第二个参数（函数）是一个callback函数。
简单！！
我使用行中的td元素来解决这个问题：
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
animation行本身导致奇怪的行为，主要是asynchronousanimation问题。
对于上面的代码，我突出显示了一个被拖放到表中的行，以突出显示更新已成功。 希望这有助于某人。
我想滑动整个tbody，并通过结合淡入淡出效果和幻灯片效果来解决这个问题。
我已经完成了三个阶段（第二步和第三步被replace，以防止滑倒或向上滑动）
- 给tbody分配高度，
- 衰落所有td和th，
- 滑动tbody。
slideUp示例：
tbody.css('height', tbody.css('height')); tbody.find('td, th').fadeOut(200, function(){ tbody.slideUp(300) });
我提供的所有其他解决scheme都遇到了问题，但是最终做起来像黄油一样简单。
像这样设置你的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（不是行）上使用animation，然后将行高设置为1px。
要再次隐藏行，请在div上使用相反的animation并将行高设置回0px。
我喜欢Vinny编写和使用的插件。 但是，如果表格在滑动行（tr / td）内，则嵌套表格的行即使在滑动之后也始终隐藏。 所以我在插件中做了一个简单的黑客攻击，不要隐藏嵌套表的行。 只需更改以下行
var $cells = $(this).find('td');
至
var $cells = $(this).find('> td');
它只发现立即tds不嵌套的。 希望这可以帮助使用插件和嵌套表的人。
我确实使用了这里提供的想法，并且遇到了一些问题。 我把它们全部固定下来，并且我想分享一个顺利的一行。
$('#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元素中新创build的div-wrapper的内容的高度很重要。
slideUp速度慢。 如果你做得更慢，你可能会意识到一些小故障。 一开始就有一个小小的跳跃。 这是因为提到的CSS设置。 但是如果没有这些设置，行的高度就不会降低。 只有它的内容会。
最后tr元素被删除。
整行只包含JQuery，没有本地的Javascript。
希望它有帮助。
如果您需要同时滑动和淡化表格行，请尝试使用以下命令：
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显示没有在同一时间开始animation行的高度
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; } }
此代码有效！
<!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>
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(); } });
}）;
Vinny提供的插头非常接近，但我发现并解决了一些小问题。
- 它贪婪地针对超出被隐藏的行的孩子的TD元素。 如果在展示这一行时find这些孩子的话，这可能还算可以。 当它们靠近时，它们都以“显示：无”的方式结束，使它们隐藏起来。
- 它根本不针对孩子的要素。
-
对于包含大量内容的表格单元格（如嵌有很多行的表格），调用slideRow（'up'），无论提供的slideSpeed值如何，只要填充animation完成，就会折叠行的视图。 我解决了这个问题，直到完成了包装上的slideUp（）方法后，才会触发填充animation。
(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);
我想添加一个评论＃Vinny的文章，但没有代表所以必须发布答案…
发现你的插件有一个错误 – 当你只是通过一个参数传入一个对象时，如果没有其他参数被传入，它们将被覆盖。通过改变参数被处理的顺序轻松解决，代码如下。 我还添加了一个closures后closures行的选项（只有我需要它！）：$（'＃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);
