¿Cómo usar la función slideDown (o show) en una fila de la tabla?

Estoy tratando de agregar una fila a una tabla y hacer que esa fila se deslice a la vista, sin embargo, la función de deslizamiento parece agregar una pantalla: estilo de bloque a la fila de la tabla que desordena el diseño.

¿Alguna idea de cómo solucionar esto?

Aquí está el código:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

Las animaciones no son compatibles con las filas de la tabla.

De "Learning jQuery" de Chaffer y Swedberg

Las filas de la tabla presentan obstáculos particulares para la animación, ya que los navegadores usan diferentes valores (tabla-fila y bloque) para su propiedad de visualización visible. Los métodos .hide () y .show (), sin animación, siempre son seguros para usar con las filas de la tabla. A partir de jQuery versión 1.1.3, también se pueden usar .fadeIn () y .fadeOut ().

Puede envolver sus contenidos de td en un div y usar el slideDown en eso. Debe decidir si la animación vale la pena el marcado adicional.

Simplemente envuelvo el tr dinámicamente y luego lo elimino una vez que se haya completado slideUp / slideDown. Es una sobrecarga bastante pequeña agregando y quitando una o un par de etiquetas y luego quitándolas una vez que se completa la animación, no veo ningún retraso visible en absoluto.

SlideUp :

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: block;" />')
 .parent()
 .find('td > div')
 .slideUp(700, function(){

  $(this).parent().parent().remove();

 });

Bajar deslizándose:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: none;" />')
 .parent()
 .find('td > div')
 .slideDown(700, function(){

  var $set = $(this);
  $set.replaceWith($set.contents());

 });

Tengo que rendir homenaje a fletchzone.com cuando tomé su complemento y lo despojé de nuevo a lo anterior, saludos compañero.

Aquí hay un complemento que escribí para esto, toma un poco de la implementación de Fletch, pero el mío se usa únicamente para deslizar una fila hacia arriba o hacia abajo (sin insertar filas).

(function($) {
var sR = {
    defaults: {
        slideSpeed: 400,
        easing: false,
        callback: false     
    },
    thisCallArgs: {
        slideSpeed: 400,
        easing: false,
        callback: false
    },
    methods: {
        up: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowUp" />');
            var currentPadding = $cells.css('padding');
            $cellContentWrappers = $(this).find('.slideRowUp');
            $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
                                                                                                                paddingTop: '0px',
                                                                                                                paddingBottom: '0px'},{
                                                                                                                complete: function () {
                                                                                                                    $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                                                                                                                    $(this).parent().css({'display':'none'});
                                                                                                                    $(this).css({'padding': currentPadding});
                                                                                                                }});
            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);                                                                                                    
            return $(this);
        },
        down: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
            $cellContentWrappers = $cells.find('.slideRowDown');
            $(this).show();
            $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });

            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);
            return $(this);
        }
    }
};

$.fn.slideRow = function(method,arg1,arg2,arg3) {
    if(typeof method != 'undefined') {
        if(sR.methods[method]) {
            return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
        }
    }
};
})(jQuery);

Uso Básico:

$('#row_id').slideRow('down');
$('#row_id').slideRow('up');

Pase las opciones de diapositiva como argumentos individuales:

$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object

Básicamente, para la animación de deslizamiento hacia abajo, el complemento envuelve el contenido de las celdas en los DIV, los anima, luego los elimina y viceversa para el deslizamiento hacia arriba (con algunos pasos adicionales para deshacerse del relleno de la celda). También devuelve el objeto al que lo llamó, por lo que puede encadenar métodos de esta manera:

$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red

Espero que esto ayude a alguien.

Puede intentar envolver el contenido de la fila en a <span>y hacer que su selector sea $('#detailed_edit_row span');un poco hack, pero acabo de probarlo y funciona. También probé la table-rowsugerencia anterior y no pareció funcionar.

Actualización : He estado jugando con este problema, y ​​según todas las indicaciones, jQuery necesita que el objeto que realiza slideDown sea un elemento de bloque. Entonces, no hay dados. Pude conjurar una tabla donde usé slideDown en una celda y no afectó en absoluto el diseño, por lo que no estoy seguro de cómo está configurada la suya. Creo que su única solución es refactorizar la tabla de tal manera que esté bien que esa celda sea un bloque, o simplemente .show();la maldita cosa. Buena suerte.

Seleccione el contenido de la fila así:

$(row).contents().slideDown();

.contents () - Obtiene los elementos secundarios de cada elemento en el conjunto de elementos coincidentes, incluidos los nodos de texto y comentario.

Estoy un poco atrasado en responder esto, pero encontré una manera de hacerlo :)

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

Acabo de poner un elemento div dentro de las etiquetas de datos de la tabla. cuando se establece visible, a medida que el div se expande, toda la fila baja. luego dígale que se desvanezca (luego agote el tiempo de espera para que vea el efecto) antes de ocultar la fila de la tabla nuevamente :)

¡Espero que esto ayude a alguien!

Neded una tabla con filas ocultas que se deslizan dentro y fuera de la vista al hacer clic en la fila.

$('.tr-show-sub').click(function(e) {  
    var elOne = $(this);
    $('.tr-show-sub').each(function(key, value) {
        var elTwoe = $(this);
        
        if(elOne.get(0) !== elTwoe.get(0)) {
            if($(this).next('.tr-sub').hasClass('tr-sub-shown')) {
                elTwoe.next('.tr-sub').removeClass('tr-sub-shown');
                elTwoe.next('tr').find('td').find('div').slideUp();
                elTwoe.next('tr').find('td').slideUp();
            }
        }
        
        if(elOne.get(0) === elTwoe.get(0)) {
            if(elOne.next('.tr-sub').hasClass('tr-sub-shown')) {
                elOne.next('.tr-sub').removeClass('tr-sub-shown');
                elOne.next('tr').find('td').find('div').slideUp();
                elOne.next('tr').find('td').slideUp();
            } else {
                elOne.next('.tr-sub').addClass('tr-sub-shown');
                elOne.next('tr').find('td').slideDown();
                elOne.next('tr').find('td').find('div').slideDown();
            }
        }
    })
});

body {
        background: #eee;
    }
    
    .wrapper {
        margin: auto;
        width: 50%;
        padding: 10px;
        margin-top: 10%;
    }
    
    table {
        background: white;
        width: 100%;
    }
    
    table th {
        background: gray;
        text-align: left;
    }
    
    table th, td {
        border-bottom: 1px solid lightgray;
        padding: 5px;
    }
    
    table .tr-show-sub {
        background: #EAEAEA;
        cursor: pointer;
    }

    table .tr-sub td {
        display: none;
    }
    
    table .tr-sub td .div-sub {
        display: none;
    }

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="wrapper">
    <table cellspacing="0" cellpadding="3">
        <thead>
            <tr class="table">
                <th>col 1</th>
                <th>col 2</th>
                <th>col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr class="tr-show-sub">
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
            <tr class="tr-sub">
                <td colspan="5"><div class="div-sub">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. 
                </div></td>
            </tr>
            <tr class="tr-show-sub">
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
            <tr class="tr-sub">
                <td colspan="5"><div class="div-sub">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. 
                </div></td>
            </tr>
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
        </tbody>
    </table>
</div>

Tener una fila de tabla con tabla anidada:

<tr class='dummyRow' style='display: none;'>
    <td>
        <table style='display: none;'>All row content inside here</table>
    </td>
</tr>

Para deslizar hacia abajo la fila:

$('.dummyRow').show().find("table").slideDown();

Nota: la fila y su contenido (aquí está "table") ambos deben estar ocultos antes de que comience la animación.

Para deslizar hacia arriba la fila:

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

El segundo parámetro ( function()) es una devolución de llamada.

¡¡Sencillo!!

Tenga en cuenta que también hay varias opciones que se pueden agregar como parámetros de las funciones de desplazamiento hacia arriba / abajo (las más comunes son las duraciones de 'slow'y 'fast').

He solucionado esto usando los elementos td en la fila:

$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);

Animar la fila en sí causa un comportamiento extraño, principalmente problemas de animación asíncrona.

Para el código anterior, estoy resaltando una fila que se arrastra y suelta en la tabla para resaltar que la actualización se realizó correctamente. Espero que esto ayude a alguien.

Utilicé las ideas proporcionadas aquí y enfrenté algunos problemas. Los arreglé todos y tengo una frase sencilla que me gustaría compartir.

$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});

Utiliza css en el elemento td. Reduce la altura a 0px. De esa manera, solo importa la altura del contenido del envoltorio div recién creado dentro de cada elemento td.

El slideUp está en lento. Si lo haces aún más lento, podrías darte cuenta de algún problema técnico. Un pequeño salto al principio. Esto se debe a la configuración css mencionada. Pero sin esos ajustes, la fila no disminuiría en altura. Solo su contenido lo haría.

Al final se elimina el elemento tr.

Toda la línea solo contiene JQuery y no tiene Javascript nativo.

Espero eso ayude.

Aquí hay un código de ejemplo:

    <html>
            <head>
                    <script src="https://code.jquery.com/jquery-3.2.0.min.js">               </script>
            </head>
            <body>
                    <table>
                            <thead>
                                    <tr>
                                            <th>header_column 1</th>
                                            <th>header column 2</th>
                                    </tr>
                            </thead>
                            <tbody>
                                    <tr id="row1"><td>row 1 left</td><td>row 1 right</td></tr>
                                    <tr id="row2"><td>row 2 left</td><td>row 2 right</td></tr>
                                    <tr id="row3"><td>row 3 left</td><td>row 3 right</td></tr>
                                    <tr id="row4"><td>row 4 left</td><td>row 4 right</td></tr>
                            </tbody>
                    </table>
                    <script>
    setTimeout(function() {
    $('#row2').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow',         function() {$(this).parent().parent().remove();});
    }, 2000);
                    </script>
            </body>
    </html>

Quiero deslizar todo el cuerpo y he manejado este problema combinando efectos de fundido y deslizamiento.

Lo hice en 3 etapas (los pasos 2 y 3 se reemplazan en caso de que desee deslizarse hacia abajo o hacia arriba)

1. Asignando altura al cuerpo,
2. Desvaneciendo todo td y th,
3. Cuerpo deslizante.

Ejemplo de slideUp:

tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
    tbody.slideUp(300)
});

Tuve problemas con todas las otras soluciones ofrecidas, pero terminé haciendo esta cosa simple que es suave como la mantequilla.

Configure su HTML así:

<tr id=row1 style='height:0px'><td>
  <div id=div1 style='display:none'>
    Hidden row content goes here
  </div>
</td></tr>

Luego configure su javascript así:

function toggleRow(rowid){
  var row = document.getElementById("row" + rowid)

  if(row.style.height == "0px"){
      $('#div' + rowid).slideDown('fast');
      row.style.height = "1px";   
  }else{
      $('#div' + rowid).slideUp('fast');
      row.style.height = "0px";   
  } 
}

Básicamente, haga la fila "invisible" 0px de alto, con un div dentro.
Use la animación en el div (no en la fila) y luego configure la altura de la fila en 1px.

Para ocultar la fila nuevamente, use la animación opuesta en el div y establezca la altura de la fila nuevamente en 0px.

Me gustó el complemento que Vinny ha escrito y he estado usando. Pero en el caso de las tablas dentro de la fila deslizante (tr / td), las filas de la tabla anidada siempre están ocultas incluso después de deslizarse hacia arriba. Así que hice un truco rápido y simple en el complemento para no ocultar las filas de la tabla anidada. Solo cambia la siguiente línea

var $cells = $(this).find('td');

a

var $cells = $(this).find('> td');

que encuentra solo tds inmediatos no anidados. Espero que esto ayude a alguien que usa el complemento y tenga tablas anidadas.

Me gustaría agregar un comentario a la publicación de # Vinny, pero no tengo el representante, así que tengo que publicar una respuesta ...

Encontró un error con su complemento: cuando simplemente pasa un objeto con argumentos, se sobrescriben si no se pasan otros argumentos. Se resuelve fácilmente cambiando el orden en que se procesan los argumentos, código a continuación. También agregué una opción para destruir la fila después del cierre (¡solo porque la necesitaba!): $ ('# Row_id'). SlideRow ('arriba', verdadero); // destruye la fila

(function ($) {
    var sR = {
        defaults: {
            slideSpeed: 400,
            easing: false,
            callback: false
        },
        thisCallArgs: {
            slideSpeed: 400,
            easing: false,
            callback: false,
            destroyAfterUp: false
        },
        methods: {
            up: function (arg1, arg2, arg3) {
                if (typeof arg2 == 'string') {
                    sR.thisCallArgs.easing = arg2;
                } else if (typeof arg2 == 'function') {
                    sR.thisCallArgs.callback = arg2;
                } else if (typeof arg2 == 'undefined') {
                    sR.thisCallArgs.easing = sR.defaults.easing;
                }
                if (typeof arg3 == 'function') {
                    sR.thisCallArgs.callback = arg3;
                } else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
                    sR.thisCallArgs.callback = sR.defaults.callback;
                }
                if (typeof arg1 == 'object') {
                    for (p in arg1) {
                        sR.thisCallArgs[p] = arg1[p];
                    }
                } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                    sR.thisCallArgs.slideSpeed = arg1;
                } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'boolean')) {
                    sR.thisCallArgs.destroyAfterUp = arg1;
                } else {
                    sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                }

                var $row = $(this);
                var $cells = $row.children('th, td');
                $cells.wrapInner('<div class="slideRowUp" />');
                var currentPadding = $cells.css('padding');
                $cellContentWrappers = $(this).find('.slideRowUp');
                $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing).parent().animate({
                    paddingTop: '0px',
                    paddingBottom: '0px'
                }, {
                    complete: function () {
                        $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                        $(this).parent().css({ 'display': 'none' });
                        $(this).css({ 'padding': currentPadding });
                    }
                });
                var wait = setInterval(function () {
                    if ($cellContentWrappers.is(':animated') === false) {
                        clearInterval(wait);
                        if (sR.thisCallArgs.destroyAfterUp)
                        {
                            $row.replaceWith('');
                        }
                        if (typeof sR.thisCallArgs.callback == 'function') {
                            sR.thisCallArgs.callback.call(this);
                        }
                    }
                }, 100);
                return $(this);
            },
            down: function (arg1, arg2, arg3) {

                if (typeof arg2 == 'string') {
                    sR.thisCallArgs.easing = arg2;
                } else if (typeof arg2 == 'function') {
                    sR.thisCallArgs.callback = arg2;
                } else if (typeof arg2 == 'undefined') {
                    sR.thisCallArgs.easing = sR.defaults.easing;
                }
                if (typeof arg3 == 'function') {
                    sR.thisCallArgs.callback = arg3;
                } else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
                    sR.thisCallArgs.callback = sR.defaults.callback;
                }
                if (typeof arg1 == 'object') {
                    for (p in arg1) {
                        sR.thisCallArgs.eval(p) = arg1[p];
                    }
                } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                    sR.thisCallArgs.slideSpeed = arg1;
                } else {
                    sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                }

                var $cells = $(this).children('th, td');
                $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
                $cellContentWrappers = $cells.find('.slideRowDown');
                $(this).show();
                $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function () { $(this).replaceWith($(this).contents()); });

                var wait = setInterval(function () {
                    if ($cellContentWrappers.is(':animated') === false) {
                        clearInterval(wait);
                        if (typeof sR.thisCallArgs.callback == 'function') {
                            sR.thisCallArgs.callback.call(this);
                        }
                    }
                }, 100);
                return $(this);
            }
        }
    };

    $.fn.slideRow = function (method, arg1, arg2, arg3) {
        if (typeof method != 'undefined') {
            if (sR.methods[method]) {
                return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            }
        }
    };
})(jQuery);

Si necesita deslizar y atenuar una fila de la tabla al mismo tiempo, intente usar estos:

jQuery.fn.prepareTableRowForSliding = function() {
    $tr = this;
    $tr.children('td').wrapInner('<div style="display: none;" />');
    return $tr;
};

jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
    $tr = this;
    if ($tr.is(':hidden')) {
        $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    } else {
        $tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
            $tr.hide();
            callback();
        });
    }
    return $tr;
};

$(document).ready(function(){
    $('tr.special').hide().prepareTableRowForSliding();
    $('a.toggle').toggle(function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Hide table row');
        });
    }, function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Display table row');
        });
});
});

function hideTr(tr) {
  tr.find('td').wrapInner('<div style="display: block;" />').parent().find('td > div').slideUp(50, function () {
    tr.hide();
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

function showTr(tr) {
  tr.show()
  tr.find('td').wrapInner('<div style="display: none;" />').parent().find('td > div').slideDown(50, function() {
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

puedes usar estos métodos como:

jQuery("[data-toggle-tr-trigger]").click(function() {
  var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
  if($tr.is(':hidden')) {
    showTr($tr);
  } else {
    hideTr($tr);
  }
});

Puedo hacerlo si configura los td en la fila para que no muestren ninguno al mismo tiempo que comienza a animar la altura en la fila

tbody tr{
    min-height: 50px;
}
tbody tr.ng-hide td{
    display: none;
}
tr.hide-line{
    -moz-transition: .4s linear all;
    -o-transition: .4s linear all;
    -webkit-transition: .4s linear all;
    transition: .4s linear all;
    height: 50px;
    overflow: hidden;

    &.ng-hide { //angularJs specific
        height: 0;
        min-height: 0;
    }
}

Este código funciona!

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <title></title>
        <script>
            function addRow() {
                $('.displaynone').show();
                $('.displaynone td')
                .wrapInner('<div class="innerDiv" style="height:0" />');
                $('div').animate({"height":"20px"});
            }
        </script>
        <style>
            .mycolumn{border: 1px solid black;}
            .displaynone{display: none;}
        </style>
    </head>
    <body>
        <table align="center" width="50%">
            <tr>
                <td class="mycolumn">Row 1</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 2</td>
            </tr>
            <tr class="displaynone">
                <td class="mycolumn">Row 3</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 4</td>
            </tr>
        </table>
        <br>
        <button onclick="addRow();">add</button>    
    </body>
</html>

http://jsfiddle.net/PvwfK/136/

<table cellspacing='0' cellpadding='0' class='table01' id='form_table' style='width:100%;'>
<tr>
    <td style='cursor:pointer; width:20%; text-align:left;' id='header'>
        <label style='cursor:pointer;'> <b id='header01'>▲ Customer Details</b>

        </label>
    </td>
</tr>
<tr>
    <td style='widtd:20%; text-align:left;'>
        <div id='content' class='content01'>
            <table cellspacing='0' cellpadding='0' id='form_table'>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

$(function () {
$(".table01 td").on("click", function () {
    var $rows = $('.content01');
    if ($(".content01:first").is(":hidden")) {
        $("#header01").text("▲ Customer Details");
        $(".content01:first").slideDown();
    } else {
        $("#header01").text("▼ Customer Details");
        $(".content01:first").slideUp();
    }
});

});

El enchufe ofrecido por Vinny está muy cerca, pero encontré y solucioné un par de pequeños problemas.

1. Se dirigió con avidez elementos td más allá de los elementos secundarios de la fila que se oculta. Esto hubiera estado bien si hubiera buscado a esos niños cuando mostraban la fila. Mientras se acercaba, todos terminaron con "display: none" en ellos, dejándolos ocultos.
2. No se dirigió a los elementos secundarios en absoluto.

3. Para celdas de tabla con mucho contenido (como una tabla anidada con muchas filas), llamando a slideRow ('arriba'), independientemente del valor de slideSpeed ​​proporcionado, colapsaría la vista de la fila tan pronto como se completara la animación de relleno . Lo arreglé para que la animación de relleno no se active hasta que se complete el método slideUp () en el ajuste.

   (function($){
       var sR = {
           defaults: {
               slideSpeed: 400
             , easing: false
             , callback: false
           }
         , thisCallArgs:{
               slideSpeed: 400
             , easing: false
             , callback: false
           }
         , methods:{
               up: function(arg1, arg2, arg3){
                   if(typeof arg1 == 'object'){
                       for(p in arg1){
                           sR.thisCallArgs.eval(p) = arg1[p];
                       }
                   }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                       sR.thisCallArgs.slideSpeed = arg1;
                   }else{
                       sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                   }
   
                   if(typeof arg2 == 'string'){
                       sR.thisCallArgs.easing = arg2;
                   }else if(typeof arg2 == 'function'){
                       sR.thisCallArgs.callback = arg2;
                   }else if(typeof arg2 == 'undefined'){
                       sR.thisCallArgs.easing = sR.defaults.easing;    
                   }
                   if(typeof arg3 == 'function'){
                       sR.thisCallArgs.callback = arg3;
                   }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                       sR.thisCallArgs.callback = sR.defaults.callback;    
                   }
                   var $cells = $(this).children('td, th');
                   $cells.wrapInner('<div class="slideRowUp" />');
                   var currentPadding = $cells.css('padding');
                   $cellContentWrappers = $(this).find('.slideRowUp');
                   $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){
                       $(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, {
                           complete: function(){
                               $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                               $(this).parent().css({ 'display': 'none' });
                               $(this).css({ 'padding': currentPadding });
                           }
                       });
                   });
                   var wait = setInterval(function(){
                       if($cellContentWrappers.is(':animated') === false){
                           clearInterval(wait);
                           if(typeof sR.thisCallArgs.callback == 'function'){
                               sR.thisCallArgs.callback.call(this);
                           }
                       }
                   }, 100);                                                                                                    
                   return $(this);
               }
             , down: function (arg1, arg2, arg3){
                   if(typeof arg1 == 'object'){
                       for(p in arg1){
                           sR.thisCallArgs.eval(p) = arg1[p];
                       }
                   }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                       sR.thisCallArgs.slideSpeed = arg1;
                   }else{
                       sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                   }
   
                   if(typeof arg2 == 'string'){
                       sR.thisCallArgs.easing = arg2;
                   }else if(typeof arg2 == 'function'){
                       sR.thisCallArgs.callback = arg2;
                   }else if(typeof arg2 == 'undefined'){
                       sR.thisCallArgs.easing = sR.defaults.easing;    
                   }
                   if(typeof arg3 == 'function'){
                       sR.thisCallArgs.callback = arg3;
                   }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                       sR.thisCallArgs.callback = sR.defaults.callback;    
                   }
                   var $cells = $(this).children('td, th');
                   $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
                   $cellContentWrappers = $cells.find('.slideRowDown');
                   $(this).show();
                   $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
   
                   var wait = setInterval(function(){
                       if($cellContentWrappers.is(':animated') === false){
                           clearInterval(wait);
                           if(typeof sR.thisCallArgs.callback == 'function'){
                               sR.thisCallArgs.callback.call(this);
                           }
                       }
                   }, 100);
                   return $(this);
               }
           }
       };
   
       $.fn.slideRow = function(method, arg1, arg2, arg3){
           if(typeof method != 'undefined'){
               if(sR.methods[method]){
                   return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
               }
           }
       };
   })(jQuery);

Solución rápida / fácil:

Utilice JQuery .toggle () para mostrar / ocultar las filas al hacer clic en Fila o Ancla.

Será necesario escribir una función para identificar las filas que le gustaría ocultar, pero alternar crea la funcionalidad que está buscando.