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

jquery animation html-table slidedown 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

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.

Mostrar snippet de código

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

Expandir snippet

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)

Atribuindo altura a tbody,
Desvanecendo-se todos os dias
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.

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.
Não tinha como alvo os elementos th de criança.

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

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

Respostas:

Para slideDown the row:

Para deslizarUp da linha: