Como usar a função slideDown (ou show) em uma linha da tabela?

214

Estou tentando adicionar uma linha a uma tabela e fazer com que essa linha deslize para exibição, no entanto, a função slownown parece adicionar uma exibição: estilo de bloco à linha da tabela que atrapalha o layout.

Alguma idéia de como contornar isso?

Aqui está o código:

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

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);
Greg
fonte
Tem que ser uma mesa? Seja muito mais fácil sem a mesa, eu acho.
MrChrister 21/01
fadeIne fadeOuttrabalhar em linhas da tabela e fazer um efeito visual alternativo agradável (testado no Firefox apenas)
Savage

Respostas:

295

Não há suporte para animações nas linhas da tabela.

Do "Learning jQuery" de Chaffer e Swedberg


As linhas da tabela apresentam obstáculos específicos à animação, pois os navegadores usam valores diferentes (linha da tabela e bloco) para suas propriedades de exibição visíveis. Os métodos .hide () e .show (), sem animação, sempre são seguros para uso com as linhas da tabela. A partir da versão 1.1.3 do jQuery, .fadeIn () e .fadeOut () também podem ser usados.


Você pode agrupar seu conteúdo td em uma div e usar o slideDown nela. Você precisa decidir se a animação vale a marcação extra.

Emily
fonte
5
Funciona bem! Há um outro problema: você também terá que animar o preenchimento de célula, se houver algum. Mas isso também não é grande coisa.
Adrian Grigore
11
Você pode animar o preenchimento da seguinte forma:$('tr').find('td').animate({padding: '0px'}, {duration: 200});
Andrew
@Emily: Você poderia apontar para linhas específicas da fonte do jQuery? Estou tentado a invadir a fonte do meu projeto.
Randomblue
7
Não é uma resposta direta, mas descobri que o uso de fadeIn / fadeOut é quase tão bom na maioria das situações e parece funcionar bem nas linhas da tabela.
Phil LaNasa
@PhilLaNasa No começo, eu estava tipo "Nah, isso não vai parecer bom", mas então eu tentei e ficou muito bom! Obrigado pela viagem!
Kenton de Jong
157

Simplesmente envolvo o tr dinamicamente e removo-o quando o slideUp / slideDown for concluído. É uma sobrecarga muito pequena adicionar e remover uma ou algumas tags e depois removê-las quando a animação estiver concluída. Não vejo nenhum atraso visível.

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

 });

Deslize para baixo:

$('#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());

 });

Eu tenho que prestar homenagem ao fletchzone.com quando peguei o plug-in dele e o tirei de volta ao que foi dito acima, parabéns.

wiks
fonte
Obrigado! De alguma forma, isso funcionou para mim: row.find ('td'). WrapInner ('<div style = "display: none;" />').parent().prependTo('#MainTable> tbody'). Find (' td> div '). slideDown (' slow ', function () {var $ set = $ (this); $ set.replaceWith ($ set.contents ());});
pauloya 24/01
O único problema é que há um pequeno atraso entre as células.
Archimedes Trajano
41

Aqui está um plug-in que eu escrevi para isso, leva um pouco da implementação do Fletch, mas o meu é usado apenas para deslizar uma linha para cima ou para baixo (sem inserir linhas).

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

Passe as opções do slide como argumentos individuais:

$('#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

Basicamente, para a animação deslizante, o plug-in agrupa o conteúdo das células nos DIVs, anima-os e os remove e vice-versa para o deslizamento para cima (com algumas etapas extras para se livrar do preenchimento da célula). Ele também retorna o objeto em que você o chamou, para que você possa encadear métodos como este:

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

Espero que isso ajude alguém.

Vinny
fonte
E se eu quiser adicionar / remover um grupo de Linhas? Eu preciso dar uma funcionalidade Master / Detail
Volatil3
A função de retorno de chamada está sendo disparada imediatamente para mim.
Justin Justin
Isso é simplesmente exibicionismo. Funciona de maneira impressionante (embora não tenha testado a funcionalidade de retorno de chamada). Um dia saberei jQuery suficiente para poder fazer engenharia reversa disso.
cartbeforehorse
1
FYI: Isso parece quebrar se o conteúdo da linha de destino for outra tabela. Não tenho tempo para ir mais longe, mas o que descobri é que ela recolhe a tabela filho, define todas as linhas como ocultas, adiciona um preenchimento estranho e não volta a expandir essas linhas depois que você chama slideRow ('baixa').
21413 Chris Porter
1
Encontrei os mesmos problemas que outras pessoas, com tabelas filho agindo de maneira engraçada ao chamar slideRow ('up') e depois slideRow ('down'). Eu descobri que é por causa do método find ('td') ser usado duas vezes no plugin. Mudei para crianças ('td') e os problemas desapareceram imediatamente. Para problemas com as células, basta atualizar as duas instâncias de filhos ('td') para filhos ('td, th').
precisa saber é o seguinte
4

Você pode tentar agrupar o conteúdo da linha em um <span>e ter o seu seletor $('#detailed_edit_row span');- um pouco imprudente, mas eu apenas testei e ele funciona. Eu também tentei a table-rowsugestão acima e ela não pareceu funcionar.

update : Eu estou brincando com esse problema e, de todas as indicações, o jQuery precisa do objeto em que ele executa o slideDown para ser um elemento de bloco. Então, não há dados. Consegui invocar uma tabela em que usei o slideDown em uma célula e isso não afetou o layout, por isso não tenho certeza de como a sua está configurada. Eu acho que sua única solução é refatorar a tabela de tal maneira que esteja tudo bem com essa célula sendo um bloco, ou apenas .show();a coisa mais maldita. Boa sorte.

Paolo Bergantino
fonte
1
Você não pode animar as tags tr e td. Você deve envolver o conteúdo de cada td com um div, em seguida, animar a div, em seguida, ocultar / mostrar o tr:<td><div style="display:block">contents</div></td>
Andrew
4

Selecione o conteúdo da linha assim:

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

.contents () - obtém os filhos de cada elemento no conjunto de elementos correspondentes, incluindo nós de texto e comentário.

jaywiz
fonte
Você também precisa selecionar a coluna, algo assim $('tr > td').contents().slideDown(). Certifique-se de que todo o conteúdo dentro da coluna esteja envolto em uma tag, ou seja, ter <td>Some text</td>não funcionará. Esta é a solução mais simples.
precisa saber é o seguinte
3

Estou um pouco atrasado em responder isso, mas achei uma maneira de fazê-lo :)

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

Acabei de colocar um elemento div dentro das tags de dados da tabela. quando é definido como visível, à medida que a div se expande, a linha inteira desce. então diga a ele para diminuir novamente (depois o tempo limite para que você veja o efeito) antes de ocultar a linha da tabela novamente :)

Espero que isso ajude alguém!

Andrew
fonte
3

Eu neded uma tabela com linhas ocultas que deslizam dentro e fora de vista no clique da linha.

Michael
fonte
3

Tenha uma linha da tabela com tabela aninhada:

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

Para slideDown the row:

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

Nota: a linha e seu conteúdo (aqui estão "table") devem estar ocultos antes do início da animação.


Para deslizarUp da linha:

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

O segundo parâmetro ( function()) é um retorno de chamada.


Simples!!

Observe que também existem várias opções que podem ser adicionadas como parâmetros das funções deslizar para cima / baixo (as mais comuns são as durações de 'slow'e 'fast').

Stalin Gino
fonte
Você realmente colocou seu conteúdo entre as linhas ou foi um erro de digitação?
31413 Vincent
2

Eu consegui contornar isso usando os elementos td na linha:

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

Animar a própria linha causa um comportamento estranho, principalmente problemas de animação assíncrona.

Para o código acima, estou destacando uma linha que é arrastada e solta na tabela para destacar que a atualização foi bem-sucedida. Espero que isso ajude alguém.

Johann
fonte
Estou ficandoeffect is not a function
Savage
2

Usei as idéias fornecidas aqui e enfrentei alguns problemas. Eu consertei todos eles e tenho uma única linha que gostaria de compartilhar.

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

Ele usa css no elemento td. Reduz a altura para 0px. Dessa forma, apenas a altura do conteúdo do div-wrapper recém-criado dentro de cada elemento td é importante.

O slideUp está lento. Se você o tornar ainda mais lento, poderá perceber alguma falha. Um pequeno salto no começo. Isso ocorre devido à configuração css mencionada. Mas sem essas configurações, a linha não diminuiria em altura. Somente seu conteúdo o faria.

No final, o elemento tr é removido.

A linha inteira contém apenas JQuery e nenhum Javascript nativo.

Espero que ajude.

Aqui está um código de exemplo:

    <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>
vento escuro
fonte
Este post tem exatamente dois anos. Eu trabalhei com o jquery versão 3.2.0. Hoje testei o código com o Chrome 73.0.3683.75 e funcionou.
darkwind 22/03/19
1

Quero deslizar o corpo inteiro e gerenciei esse problema combinando os efeitos de desbotamento e deslizamento.

Fiz isso em três etapas (a segunda e a terceira etapas são substituídas caso você queira deslizar para baixo ou para cima)

  1. Atribuindo altura a tbody,
  2. Desvanecendo-se todos os dias
  3. Deslizando o corpo.

Exemplo de slideUp:

tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
    tbody.slideUp(300)
});
Mordedor
fonte
Isso não afeta a tabela inteira, em vez de apenas uma linha específica?
Savage
1

Eu tive problemas com todas as outras soluções oferecidas, mas acabei fazendo essa coisa simples que é suave como manteiga.

Configure seu HTML da seguinte maneira:

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

Em seguida, configure seu javascript da seguinte maneira:

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

Basicamente, torne a linha "invisível" 0px alta, com uma div dentro.
Use a animação na div (não na linha) e defina a altura da linha como 1px.

Para ocultar a linha novamente, use a animação oposta na div e defina a altura da linha novamente como 0px.

Vincent
fonte
1

Gostei do plugin que Vinny escreveu e tem usado. Porém, no caso de tabelas dentro da linha deslizante (tr / td), as linhas da tabela aninhada sempre ficam ocultas, mesmo depois de deslizadas. Então, fiz um hack rápido e simples no plug-in para não ocultar as linhas da tabela aninhada. Apenas mude a seguinte linha

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

para

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

que encontra apenas tds imediatos e não aninhados. Espero que isso ajude alguém usando o plug-in e tenha tabelas aninhadas.

rajug
fonte
1

Gostaria de adicionar um comentário à postagem de # Vinny, mas não tenho o representante, por isso tenho que postar uma resposta ...

Foi encontrado um erro no seu plug-in - quando você passa um objeto com argumentos, eles são sobrescritos se nenhum outro argumento for passado. Facilmente resolvido alterando a ordem em que os argumentos são processados, código abaixo. Também adicionei uma opção para destruir a linha após o fechamento (apenas porque eu precisava dela!): $ ('# Row_id'). SlideRow ('up', true); // destrói a linha

(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);
Mark Ball
fonte
Esqueci de mencionar que eu também acrescentou nas crianças e th correções
Mark Bola
0

Se você precisar deslizar e desbotar uma linha da tabela ao mesmo tempo, tente usar estas:

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

você pode usar estes 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);
  }
});
Zernel
fonte
0

Posso fazer isso se você definir os td na linha para exibir nenhum ao mesmo tempo em que começar a animar a altura na linha

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;
    }
}
Morten Holmgaard
fonte
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>
Tuvia Khusid
fonte
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();
    }
});

});

Urso Urso
fonte
Isso mostra e oculta uma div que contém uma tabela. Não é uma linha da tabela, conforme solicitado pelo OP.
#
0

O plugue oferecido por Vinny é muito próximo, mas eu encontrei e corrigi alguns pequenos problemas.

  1. Ele almejava avidamente elementos td além de apenas os filhos da linha serem escondidos. Isso teria sido bom se tivesse procurado aquelas crianças ao mostrar a fila. Enquanto chegava perto, todos acabavam com "display: none", tornando-os ocultos.
  2. Não tinha como alvo os elementos th de criança.
  3. Para células da tabela com muito conteúdo (como uma tabela aninhada com muitas linhas), chamando slideRow ('up'), independentemente do valor slideSpeed ​​fornecido, reduziria a exibição da linha assim que a animação de preenchimento fosse concluída . Corrigi-o para que a animação do preenchimento não seja acionada até que o método slideUp () no invólucro esteja pronto.

    (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);
OregonJeff
fonte
@ circircuitry, você tinha algo específico a oferecer ou suas críticas são suficientes?
precisa saber é o seguinte
@Oregoneff Apenas sendo honesto. Estou procurando por algo mais simples. Não deve demorar 109 linhas de código para deslizar uma linha da tabela.
circuitos
@circuitry, não fica mais simples se você deseja usar como um plug-in (e não se envolver apenas na prática ruim de códigos específicos de uso) com a capacidade de controlar a velocidade, facilitar e ter retornos de chamada em um personalizável base. Como isso é algo que você incluiria na sua biblioteca de códigos e pode ser usado para qualquer implementação que exija expansão / recolhimento de linhas da tabela, não sei por que é importante que sejam 109 linhas de código.
precisa saber é o seguinte
0

Correção rápida / fácil:

Use JQuery .toggle () para mostrar / ocultar as linhas ao clicar em Row ou Anchor.

Uma função precisará ser escrita para identificar as linhas que você deseja ocultar, mas alternar cria a funcionalidade que você está procurando.

Daniel Adams
fonte
Eu acho que isso foi sugerido em esta resposta já ...
DarkCygnus