Showing newly added table row using .show("slow")

Question

I am cloning a hidden table row then populating it and after validation I want to show the row using a 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 does show the row but it appears instantly. I have tried hiding all the <td> elements of the row then showing those and that does seem to work but some strange styles get added to each <td> which interfere with the formatting i.e. style="display: block;"

Answer 1

This is not going to work this way. Table rows and cells are not meant to be displayed as blocks so the show/fade effects are not going to work on table rows directly.

You could, however, 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 yield the expected behaviour.

Answer 2

Could you perhaps animate the height property of the row? I'm not sure if this would work, but it might be a lot simpler 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 lets you do this. You can add and remove rows (with animation) and it doesn't require wrapping your 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