Анимация удаления строк таблицы в jQuery

StackOverflow https://stackoverflow.com/questions/1303343

  •  19-09-2019
  •  | 
  •  

Вопрос

Я написал некоторый код jQuery для использования анимации "slideUp" при удалении строк из таблицы.Чтобы анимация выглядела плавной, я обернул содержимое каждого TD в строке тегами DIV и вызвал функцию slideUp для DIVs, удалив фактические TDS по завершении анимации.Код для этого выглядит следующим образом:

$("tr[id$=" + rowID + "]").children("td").each(function() {
    $(this).children("div").slideUp(function() {
        $(this).parent().remove();
    });        
});

Пока все так хорошо.Однако я заметил, что этот код удаляет не сам TR, а только его содержимое, поэтому я добавил следующую строку для удаления TR:

$("tr[id$=" + rowID + "]").remove();

Проблема в том, что после того, как я добавил строку выше, анимация перестала работать.Другими словами, строка просто исчезает без приятного эффекта скольжения.Кто-нибудь знает, почему это так и как это обойти?

Это было полезно?

Решение

Потому что вы удаляете tr который содержит все анимированные элементы.Больше никаких элементов, никакой анимации.Учитывая, что все slideUps должно занимать столько же времени, вам, вероятно, сойдет с рук изменение обратного вызова finish с $(this).parent().remove() Для $(this).closest('tr').remove().

Другие советы

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

Лучшие,

Флетч

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top