Animating Table Rows with jQuery
Posted in AuroraCMS, Code, Product Reviews, Tips and Tricks
Animating table rows in the browser is problematic. You see, they aren’t block elements and as such don’t have a height or width property. Instead they take their constraints from the content inside them, and the elements that contain them. For rows this typically means they’re constrained by the containing table, and filled by the contained columns.
Today I wanted to slide a row up, and then when it had finished sliding I wanted to remove it from the DOM. Essentially giving it a nice effect when something is deleted.
Given that the height of a row is controlled by it’s content, I figured the easiest way to do this would be to wrap all of the content inside each column with a block element, in this case a div, and then resize those.
jQuery makes this extremely easy :
var el = $(options.element_prefix + id);
el.children("td").each(function() {
$(this).wrapInner("< div />").children("div").slideUp(function() {el.remove();})
});
NOTE : The div tag in the wrapInner() is malformed because it won’t display properly otherwise. Please remove the space between the opening bracket and ‘div’.
It’s all pretty easy to understand. Essentially my root element is a row, and so for each td in that row wrap it’s content in a div. Then for the child divs in each td, run the slideUp() method. The callback in the slideUp() method says after the animation is done, remove the row. Given the speed of computers these days, no one will notice that the last few columns quite likely just vanish instead of complete their animation.
Bryan
Dec 23, 2008
wrapInner is an addon? or in jquery – I’m getting errors
aaron
Dec 23, 2008
Please use a div tag in the wrapInner() call. Unfortunately I couldn’t put the div tag into my code and have it display correctly.
...wrapInner('< div />')...
wrapInner() is a native jQuery method
Daniel
Jan 6, 2009
Can you post a simple demo of this?
Daniel
aaron
Jan 8, 2009
We’re currently procuring a domain on which to put demo code that may be required in situations such as this. When that’s done I’ll make sure to put something up and update the blog.
tino
Aug 5, 2009
Thanks. Works great until you add div and input boxes etc. in your cell.
For some reason, it stops the slideUp from working nicely.
Tino
GrizzlyNetch
Jul 19, 2010
Hi, i know that it’s an old topic, but i thing, that your code is not “correct”. You innerwrap content of every td, slideUp the div and after this You call el.remove(). So i think, that el.remove() is called several times (exactly as the number of tds in tr). Here’s my solution for this:
tr.children(‘td’).wrapInner(”).wrapInner(”);
tr.children(‘td’).children(‘div’).slideUp(‘normal’,function(){tr.remove()});
I hope it’s correct:)
GrizzlyNetch
Jul 19, 2010
Sorry, I’ve pasted the wrong code:
tr.children(’td’).wrapInner(‘(div)’);
tr.children(’td’).children(’div’).slideUp(’normal’,function(){tr.remove()});
…i don’t know how to insert tags/code, so replace ( and ) by < and >
Aaron
Jul 20, 2010
@GrizzlyNetch : Yeah, it looks like you’re right. Not sure why I didn’t spot that earlier. It would’ve probably shown up in perf fixes. Thanks :)
Ashley
Jan 30, 2012
Still no demo?
Adam
Feb 1, 2012
Hi Ashley,
This post is 3 years old, I’ll get one of our team to review and update it if necessary.
Cheers!