JQuery - hide / collapse the string <table>

Question

I want the table rows to disappear (by animating their heights to 0px and opacity to 0). I use 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 row cells, I want hidden. Opacity animates correctly, but the table row does not decrease. If I set height: 500px then it works, but I need the line to disappear.

I cannot remove an element from the DOM, although due to scripts expecting values ​​from form elements in these lines.

Answer 1

If you can apply a <div> in each <td> element, you can animate them correctly. jQuery does not apply height animations to <tr> and <td> . I think height animation only works with elements with display: block .

Small change:

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

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

Answer 2

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

However, you can use the jQuery wrapInner function to dynamically wrap <td> content only if you need to animate the line:

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

Word about supplement

If your <td> elements are registered, they must also be animated for the full collapse effect. This can be easily done using CSS3 transitions:

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

And CSS:

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

Answer 3

you bring kids to life, animate <tr>

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