jQuery - hiding/collapsing a <table> row

Question

I want table rows to disappear (by animating their height to 0px and opacity to 0). I'm using the following

$('#somecellelement').closest('tr').children('td').css('overflow','hidden');
$('#somecellelement').closest('tr').children('td').animate({
    height: '0px',
    opacity: 0
},500);

Where #somecellelement is something contained in cells of rows I want hidden. Opacity is animating correctly but the table row doesn't get smaller. If I set height: 500px then it works, but I need the row to disappear.

I cannot remove the element from DOM, though, due to scripts expecting values from form elements in those rows.

Solution 1

If you can apply a <div> within each <td> element, then you can animate them properly. jQuery does not apply height animations to <tr> and <td>. The height animations only work on elements with display: block set, I believe.

A small change:

$('#somecellelement').closest('tr').children('td').children('div').animate(
    {height: '0px',
     opacity: 0}, 500);  

Full sample here: http://jsfiddle.net/PvwfK/

Solution 2

As Doozer Blake's answer says, you cannot apply jQuery animations to <td> and <tr> elements. I also don't like the idea of adding a <div> element to every cell in the table in advance, because in large tables it can hurt performance.

However, you can use jQuery's wrapInner function to dynamically wrap the contents of the <td>, only when you need to animate the row:

$('#somecellelement')
    .closest('tr')
    .children('td')
    .wrapInner('<div class="td-slider" />')
    .children(".td-slider")
    .slideUp();

A word about padding

If your <td> elements have padding, they also need to be animated for a complete collapsing effect. This can be done easily with CSS3 transitions:

$('#somecellelement').closest('tr').addClass('collapsed');

And the CSS:

td {padding:10px; transition:padding 1s;}
.collapsed > td {padding:0;}

Solution 3

you are animating the children, animate the <tr>

$('#somecellelement').closest('tr').animate({
    height: '0px',
    opacity: 0
},500);

Comments

[Doozer Blake]

Well, you're going to have issues achieving a height animation on a tr or td is why I asked, they just don't appear to work. The 2 solutions posted below are I assume not doing what you're looking for specifically. I'm reading it that you want it to animate the height up until the row disappears.

[A-OK]

Same thing, doesn't work. I tried animating children because I read that there are problems with animating table rows and I forgot to put it back the way it was.

[A-OK]

Actually height animations work in my case, but only when I set them to something larger than they are initially. My problem seems to be that table rows overflow can't be set to hidden for some reason.