Display a newly added table row using .show ("slow")

Question

I clone the hidden row of the table and then fill it, and after checking, I want to show the row using the jquery effect ... say.show ("slow")

var baseRow = $("#tasks tr#baseTaskLine"); var newRow = baseRow.clone(); var lastRow = $("#tasks tr[id^='TaskLine_']" + dayClass + ":last"); var newRowId; if (lastRow.length == 0) { newRowId = "TaskLine_new0"; } else { newRowId = "TaskLine_new" + lastRow[0].rowIndex; } newRow.attr("id", newRowId); : [populate new row] : if (lastRow.length == 0) { baseRow.after(newRow); } else { lastRow.after(newRow); } newRow.hide(); : : [validate via webservice call] : newRow.show("slow"); 

This shows the line, but it appears instantly. I tried to hide all the <td> elements of the string and then show them, and this seems to work, but some weird styles are added to each <td> that interfere with formatting, i.e. style="display: block;"

Answer 1

This will not work. Rows and cells of a table are not intended to be displayed in blocks, so show / fade effects will not work directly in rows of a table.

However, you could put a <div> in each of the cells, something like this:

 <table> <tr id="row1"><td><div>Cell1:1</div></td><td><div>Cell2:1</div></td></tr> <tr id="row2"><td><div>Cell1:2</div></td><td><div>Cell2:2</div></td></tr> </table> 

and then to the following:

 $('#row2 td div').show('slow'); 

This will give the expected behavior.

Answer 2

Perhaps you can animate the line height property? I'm not sure if this will work, but it can be a lot easier than adding extra markup.

 <table id="myTable"> <tbody> <tr><td>Row 1,1</td><td>Row 1,2</td></tr> <tr><td>Row 2,1</td><td>Row 2,2</td></tr> </tbody> </table> 

and this:

 // get the row you're after. var $row = $("#myTable tr:last"); // store its height var h = $row.height(); $row .css("height", 0) // set the height back to 0 .animate({ height : h + "px" // animate it back to normal. }, "slow") ; 

Answer 3

I wrote a jQuery plugin that allows you to do this. You can add and delete lines (with animation), and this does not require wrapping your data with a div or something like that. Check it out at http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best

Fletch