jQuery - How to Use slideDown (or show) function on a table row?

Question

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 up the layout.

Any ideas how to work around this?

Here's the code:

$.get('/some_url',{'val1':id},
    function(data){
        var row = $('#detailed_edit_row');            
        row.hide();
        row.html(data);
        row.slideDown(1000);            
    });

Answer 1

You could try wrapping the contents of the row in a <span> and having your selector be $('#detailed_edit_row span'); - a bit hackish, but I just tested it and it works. I also tried the table-row suggestion above and it didn't seem to work.

update: I've been playing around with this problem, and from all indications jQuery needs the object it performs slideDown on to be a block element. So, no dice. I was able to conjure up a table where I used slideDown on a cell and it didn't affect the layout at all, so I am not sure how yours is set up. I think your only solution is to refactor the table in such a way that it's ok with that cell being a block, or just .show(); the damn thing. Good luck.

Answer 2

Animations are not supported on table rows.

From "Learning jQuery" by Chaffer and Swedberg

---

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

---

You can wrap your td contents in a div and use the slideDown on that. You need to decide if the animation is worth the extra markup.

Answer 3

I'm a bit behind the times on answering this, but I found a way to do it :)

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);
}

}

I just put a div element inside the table data tags. when it is set visible, as the div expands, the whole row comes down. then tell it to fade back up (then timeout so you see the effect) before hiding the table row again :)

Hope this helps someone!

Answer 4

I wrote a jQuery plugin that lets you do this. You can add and remove rows and it doesn't require wrapping you data with a div or anything like that. Check it out at http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch

Answer 5

Im a newbie to this community. Pl rate my answer. :)

You can find this one works fine.

Im having a table(<table style='display: none;'></table>)

inside the <tr class='dummyRow' style='display: none;'><td></td></tr> content.

To slide down the row..

$('.dummyRow').show().find("table").slideDown();

Note: row and the content inside row (here it is table) both should be hidden before animation starts.

To slide up the row..

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

second parameter(function) is a callback.

Simple!!

Answer 6

I simply wrap the tr dynamically then remove it once the slideUp/slideDown has complete. It's a pretty small overhead adding and removing one or a couple of tags and then removing them once the animation is complete, I don't see any visible lag at all doing it.

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());

 });

I have to pay tribute to fletchzone.com as I took his plugin and stripped it back to the above, cheers mate.