Отображение новой добавленной строки таблицы с использованием .show ("slow")

Question

Я клонирую скрытую строку таблицы, затем заполняю ее, и после проверки я хочу показать строку, используя эффект jquery ... скажем .show («медленно»)

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

Это показывает строку, но она появляется мгновенно. Я попытался скрыть все <td> элементы строки, затем показать их, и это, кажется, работает, но к каждому <td> добавляются некоторые странные стили, которые мешают форматированию, т.е.

Answer 1

Это не сработает. Строки и ячейки таблицы не предназначены для отображения в виде блоков, поэтому эффекты отображения / затухания не будут работать непосредственно над строками таблицы.

Вы могли бы, однако, поместить

в каждую из ячеек, что-то вроде этого:

<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>

и затем к следующему:

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

Это приведет к ожидаемому поведению.

Answer 2

Я написал плагин jQuery, который позволяет вам делать это. Вы можете добавлять и удалять строки (с анимацией), и вам не нужно оборачивать ваши данные div или чем-то подобным Проверьте это в http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best

Флетч

Answer 3

Не могли бы вы, возможно, анимировать свойство высоты строки? Я не уверен, что это сработает, но это может быть намного проще, чем добавление дополнительной разметки.

<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>

и это:

// 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")
;