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

Я клонирую скрытую строку таблицы, затем заполняю ее, и после проверки я хочу показать строку, используя эффект 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> добавляются некоторые странные стили, которые мешают форматированию, то есть style = "display: block;"

Сейчас это довольно старый вопрос, но я подумал, что хотел бы передать слово с предупреждением: использование show('slow') для строк таблицы вызывает у меня 100% скачки ЦП в Firefox и Chrome на Linux. show() работает нормально, как ни странно.

— 02.10.2009 05:36

jquery

15.10.2008 13:11

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

2 112

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

Однако вы можете поместить <div> в каждую из ячеек, примерно так:

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

Это даст ожидаемое поведение.

Спасибо, это отлично работает в FireFox, однако в IE7 он все еще не отображается должным образом (жирный стиль, который должен быть унаследован от класса <tr>, потерян).

— 15.10.2008 14:12

Вы можете указать style = "font-weight: bold;" в каждый из div. Более того, вы можете создать класс CSS, например b {font-weight: bold;>, а затем применить class = "b" для каждого из div,

— 15.10.2008 14:22

извините, это были <div style = "font-weight: bold;"> b {font-weight: bold;} и <class = "b">. Stackoverflow съел мои символы <>.

— 15.10.2008 14:23

Да, это было моей точкой зрения, что класс CSS в <tr> не полностью применяется к <div> в IE, я постараюсь добавить его специально

— 15.10.2008 14:38

15.10.2008 13:22

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

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

15.10.2008 17:20

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

Лучший,

Флетч

09.06.2010 08:30