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

jquery

Solution

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.

Problem

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;"`

Original source