Animieren der Löschung von Tabellenzeilen in jQuery

Question

Ich habe einige jQuery-Code geschrieben, um die „slideUp“ Animation zu verwenden, wenn Zeilen aus einer Tabelle zu löschen. Um die Animation glatt zu erscheinen, wickelte ich den Inhalt jeden TD in der Reihe mit DIV-Tags und rief die slideUp Funktion auf dem DIVs, die tatsächlichen TDs nach Abschluss der Animation zu entfernen. Der Code dafür ist wie folgt:

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

So weit, so gut. Allerdings bemerkte ich, dass dieser Code nicht mit dem tatsächlichen TR nicht entfernt, nur seinen Inhalt, so fügte ich die folgende Zeile die TR zu entfernen:

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

Das Problem ist, dass, nachdem ich die Zeile oben hinzugefügt, die Animation zu arbeiten aufhören. Mit anderen Worten, verschwindet die Reihe einfach ohne die schöne Gleitwirkung. Weiß jemand, warum das so ist und wie um es zu bekommen?

Answer 1

Da Sie die tr sind zu entfernen, die alle die animierten Elemente enthält. Nicht mehr Elemente, nicht mehr Animation. Da alle des slideUps sein sollten, die gleiche Menge an Zeit zu nehmen, können Sie wahrscheinlich mit der Änderung der Oberfläche Rückruf von $(this).parent().remove() weg $(this).closest('tr').remove().

Answer 2

Ich schrieb eine jQuery-Plugin, das Sie dies tun kann. Sie können Zeilen hinzufügen und entfernen und es erfordert nicht Ihre Daten mit einem div oder ähnliches gewickelt wird. Check it out unter http: // www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch