Animación de la supresión de filas de la tabla en jQuery

Question

He escrito algo de código jQuery para usar la animación "slideUp" al eliminar filas de una tabla. A fin de que la animación a aparecer lisa, envolví el contenido de cada TD en la fila con etiquetas DIV, y llamó a la función slideUp en los DIVs, eliminando el TDS reales sobre la terminación de la animación. El código para ello es la siguiente:

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

Hasta ahora, todo bien. Sin embargo, he notado que este código no se elimina la TR real, sólo su contenido, por lo que añade la siguiente línea para eliminar el TR:

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

El problema es que después de añadir la línea anterior, la animación dejó de funcionar. En otras palabras, la fila simplemente desaparece sin el agradable efecto de deslizamiento. ¿Alguien sabe por qué esto es así y cómo conseguir alrededor de él?

Answer 1

Debido a que usted está quitando la tr que contiene todos los elementos animados. No hay más elementos, no más animación. Dado que todos los slideUps debería de tomar la misma cantidad de tiempo, es probable que pueda escapar con el cambio de la devolución de llamada acabado de $(this).parent().remove() a $(this).closest('tr').remove().

Answer 2

escribí un plugin de jQuery que te permite hacer esto. Puede añadir y eliminar filas y que no requiere de embalar sus datos con un div o algo por el estilo. Compruébelo usted mismo en http: // www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Mejor,

Fletch