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


214

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);
  }
);

¿Tiene que ser una mesa? Sería mucho más fácil sin la mesa, creo.
MrChrister el

fadeIny fadeOuttrabajar en filas de la tabla y crear un agradable efecto visual alternativo (probado solo en Firefox)
Savage

Respuestas:


295

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.


55
¡Funciona genial! Hay otro problema menor: también tendrás que animar el relleno de la celda si hay alguno. Pero eso tampoco es gran cosa.
Adrian Grigore

11
Puede animar el relleno de la siguiente manera:$('tr').find('td').animate({padding: '0px'}, {duration: 200});
Andrew

@Emily: ¿Podría señalar líneas específicas de la fuente jQuery? Estoy tentado de hackear la fuente de mi proyecto.
Randomblue

77
No es una respuesta directa, pero he descubierto que usar fadeIn / fadeOut es casi tan bueno en la mayoría de las situaciones y parece funcionar bien en las filas de la tabla.
Phil LaNasa

@PhilLaNasa Al principio pensé "No, eso no se verá bien", pero luego lo probé y ¡se veía muy bien! Gracias por el viaje!
Kenton de Jong

157

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.


¡Gracias! De alguna manera, esto funcionó para mí: row.find ('td'). WrapInner ('<div style = "display: none;" />').parent().prependTo('#MainTable> tbody'). Find (' td> div '). slideDown (' lento ', function () {var $ set = $ (this); $ set.replaceWith ($ set.contents ());});
pauloya

El único problema es que hay un ligero retraso entre las células.
Arquímedes Trajano

41

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.


¿Qué sucede si deseo agregar / eliminar un grupo de filas? Necesito dar una funcionalidad Maestro / Detalle
Volatil3

La función de devolución de llamada se activa de inmediato para mí.
Justin

Eso es simplemente presumir. Sin embargo, funciona de maravilla (aunque no he probado la funcionalidad de devolución de llamada). Algún día sabré suficiente jQuery para poder realizar ingeniería inversa.
cartbeforehorse

1
FYI: Esto parece romperse si el contenido de la fila de destino es otra tabla. No tengo tiempo para ir más allá, pero lo que he encontrado es que colapsa la tabla secundaria, establece todas las filas en ocultas, agrega un relleno extraño y luego no volverá a expandir esas filas una vez que llame a slideRow ('abajo').
Chris Porter

1
Me encontré con los mismos problemas que otros con tablas secundarias que actúan de manera divertida al llamar a slideRow ('arriba') y luego a slideRow ('abajo'). Descubrí que se debe al método find ('td') que se usa dos veces en el complemento. Cambié esto a niños ('td') y los problemas desaparecieron de inmediato. Para problemas con las celdas th, simplemente actualice ambas instancias de children ('td') a children ('td, th').
OregonJeff

4

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.


1
No puede animar etiquetas tr y td. Debe envolver el contenido de cada td con un div, luego animar el div, luego ocultar / mostrar el tr:<td><div style="display:block">contents</div></td>
Andrew

4

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.


También tienes que seleccionar la columna, así que algo así $('tr > td').contents().slideDown(). Asegúrese de que todo el contenido dentro de la columna esté envuelto en una etiqueta, es decir, <td>Some text</td>no funcionará. Esta es la solución más simple.
user2233706

3

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!


3

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


3

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').


¿Pusiste realmente tu contenido entre tus filas o fue un error tipográfico?
Vincent

2

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.


Me estoy poniendoeffect is not a function
Salvaje

2

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>

Esta publicación tiene exactamente dos años. He trabajado con jquery versión 3.2.0. Hoy probé el código con Chrome 73.0.3683.75 y funcionó.
darkwind

1

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)
});

¿No afecta esto a toda la tabla, en lugar de solo una fila en particular?
Salvaje

1

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.


1

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.


1

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);

Olvidé mencionar que también he agregado las correcciones para niños y adolescentes
Mark Ball,

0

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');
        });
});
});

0
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);
  }
});

0

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;
    }
}

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>

0

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();
    }
});

});


Esto muestra y oculta un div que contiene una tabla. No es una fila de la tabla como el OP preguntó.
shazbot

0

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);

@circuitry, ¿tenía algo específico que ofrecer o es suficiente su crítica?
OregonJeff

@Oregoneff Solo siendo honesto. Estoy buscando algo más simple. No debería tomar 109 líneas de código para deslizar una fila de la tabla.
circuitería

@circuitry, no se vuelve más simple si desea poder usarlo como complemento (y no solo involucrarse en la mala práctica del código específico de uso) con la capacidad de controlar la velocidad, la relajación y tener devoluciones de llamada en un personalizable base. Dado que esto es algo que incluiría en su biblioteca de códigos y se puede usar para cualquier implementación que requiera expandir / contraer filas de la tabla, no estoy seguro de por qué es importante que sean 109 líneas de código.
OregonJeff

0

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.


Creo que esto ya se sugirió en esta respuesta ...
DarkCygnus
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.