How to Use slideDown (or show) function on a table row?
I\'m trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes
-
Have a table row with nested table:
<tr class='dummyRow' style='display: none;'> <td> <table style='display: none;'>All row content inside here</table> </td> </tr>
To slideDown the row:
$('.dummyRow').show().find("table").slideDown();Note: the row and it's content (here it is
"table") both should be hidden before animation starts.
To slideUp the row:
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});The second parameter (
function()) is a callback.
Simple!!
Note that there are also several options that can be added as parameters of the slide up/down functions (the most common being durations of
'slow'and'fast').讨论(0) -
The plug offered by Vinny is really close, but I found and fixed a couple of small issues.
- 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);
讨论(0) -
I did use the ideas provided here and faced some problems. I fixed them all and have a smooth one-liner I'd like to share.
$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});It uses css on the td element. It reduces the height to 0px. That way only the height of the content of the newly created div-wrapper inside of each td element matters.
The slideUp is on slow. If you make it even slower you might realize some glitch. A small jump at the beginning. This is because of the mentioned css setting. But without those settings the row would not decrease in height. Only its content would.
At the end the tr element gets removed.
The whole line only contains JQuery and no native Javascript.
Hope it helps.
Here is an example code:
<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>讨论(0) -
I liked the plugin that Vinny's written and have been using. But in case of tables inside sliding row (tr/td), the rows of nested table are always hidden even after slid up. So I did a quick and simple hack in the plugin not to hide the rows of nested table. Just change the following line
var $cells = $(this).find('td');to
var $cells = $(this).find('> td');which finds only immediate tds not nested ones. Hope this helps someone using the plugin and have nested tables.
讨论(0) -
I can be done if you set the td's in the row to display none at the same time you start animating the height on the row
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; } }讨论(0) -
I had problems with all the other solutions offered but ended up doing this simple thing that is smooth as butter.
Set up your HTML like so:
<tr id=row1 style='height:0px'><td> <div id=div1 style='display:none'> Hidden row content goes here </div> </td></tr>Then set up your javascript like so:
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"; } }Basically, make the "invisible" row 0px high, with a div inside.
Use the animation on the div (not the row) and then set the row height to 1px.To hide the row again, use the opposite animation on the div and set the row height back to 0px.
讨论(0)
加载中...
- 热议问题