L'animation de la suppression des lignes de la table dans jQuery

Question

J'ai écrit un code jQuery pour utiliser l'animation « slideUp » lors de la suppression des lignes d'une table. Pour l'animation à paraître lisse, j'enveloppé le contenu de chaque TD dans la ligne avec les balises DIV, et a appelé la fonction slideUp sur les DIVs, en supprimant les TDs réels à la fin de l'animation. Le code qui est comme suit:

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

Jusqu'à présent, si bon. Cependant, je remarque que ce code ne supprime pas la TR réelle, que son contenu, alors j'ai ajouté la ligne suivante pour supprimer le TR:

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

Le problème est que après avoir ajouté la ligne ci-dessus, l'animation cesser de travailler. En d'autres termes, la ligne disparaît tout simplement sans le bel effet de glissement. Quelqu'un sait-il pourquoi il en est ainsi et comment la contourner?

Answer 1

Parce que vous supprimez la tr qui contient tous les éléments animés. Pas plus d'éléments, pas plus d'animation. Étant donné que tous les slideUps devraient prendre la même quantité de temps, vous pouvez probablement avec changer la fonction de rappel d'arrivée de $(this).parent().remove() à $(this).closest('tr').remove().

Answer 2

J'ai écrit un plugin jQuery qui vous permet de le faire. Vous pouvez ajouter et supprimer des lignes et il ne nécessite pas d'emballer vos données avec un div ou quoi que ce soit comme ça. Check it out http: // www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch