Animare la soppressione delle righe della tabella in jQuery

Question

Ho scritto un po 'di codice jQuery per utilizzare l'animazione "slideUp" quando si elimina righe da una tabella. Affinché l'animazione appaia liscia, ho avvolto il contenuto di ogni TD nella fila con tag DIV, e chiamato la funzione slideUp dei div, rimuovendo i TD reali al termine dell'animazione. Il codice per questo è la seguente:

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

Fin qui, tutto bene. Tuttavia, ho notato che questo codice non rimuove il TR attuale, solo il suo contenuto, così ho aggiunto la seguente riga per rimuovere il TR:

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

Il problema è che dopo ho aggiunto la linea di cui sopra, l'animazione smesso di lavorare. In altre parole, la riga semplicemente scompare senza il piacevole effetto di scorrimento. Qualcuno sa perché questo è così e come ottenere intorno ad esso?

Answer 1

Perché si sta rimuovendo il tr che contiene tutti gli elementi animati. Non più elementi, non di più animazioni. Dato che tutte le slideUps dovrebbe prendere la stessa quantità di tempo, probabilmente si può ottenere via con cambiando la richiamata finitura dal $(this).parent().remove() a $(this).closest('tr').remove().

Answer 2

ho scritto un plugin jQuery che ti permette di fare questo. È possibile aggiungere e rimuovere le righe e non richiede avvolgendo i dati con un div o qualcosa di simile. Check it out a http: // www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch