Comment utiliser la fonction slideDown (ou show) sur une ligne de tableau?

215

J'essaie d'ajouter une ligne à un tableau et de faire glisser cette ligne dans la vue, mais la fonction de glissement semble ajouter un style d'affichage: bloc à la ligne du tableau qui gâche la disposition.

Avez-vous des idées pour contourner ce problème?

Voici le code:

$.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
la source

Faut-il que ce soit une table? Soyez beaucoup plus facile sans la table je pense.

MrChrister

fadeInet fadeOuttravailler sur les lignes du tableau et faire un bel effet visuel alternatif (testé sur Firefox uniquement)

Savage

296

Les animations ne sont pas prises en charge sur les lignes du tableau.

Extrait de "Learning jQuery" de Chaffer et Swedberg

Les lignes de tableau présentent des obstacles particuliers à l'animation, car les navigateurs utilisent différentes valeurs (tableau-ligne et bloc) pour leur propriété d'affichage visible. Les méthodes .hide () et .show (), sans animation, sont toujours sûres à utiliser avec des lignes de table. Depuis jQuery version 1.1.3, .fadeIn () et .fadeOut () peuvent également être utilisés.

Vous pouvez envelopper votre contenu td dans une div et utiliser le slideDown à ce sujet. Vous devez décider si l'animation vaut le balisage supplémentaire.

Emilie
la source

5

Fonctionne très bien! Il y a un autre piège mineur: vous devrez également animer le remplissage des cellules s'il y en a. Mais ce n'est pas un gros problème non plus.

Adrian Grigore

11

Vous pouvez animer le rembourrage comme ceci:$('tr').find('td').animate({padding: '0px'}, {duration: 200});

Andrew

@Emily: Pourriez-vous s'il vous plaît pointer vers des lignes spécifiques de la source jQuery? Je suis tenté de pirater la source de mon projet.

Randomblue

7

Pas une réponse directe, mais j'ai trouvé que l'utilisation de fadeIn / fadeOut est presque aussi bonne dans la plupart des situations et cela semble fonctionner correctement sur les lignes de table.

Phil LaNasa

@PhilLaNasa Au début, je me disais "Nan, ça ne va pas bien" mais ensuite je l'ai essayé et ça avait l'air vraiment bien! Merci pour le voyage!

Kenton de Jong

157

J'emballe simplement le tr dynamiquement puis le supprime une fois le slideUp / slideDown terminé. C'est un assez petit frais généraux ajoutant et supprimant une ou deux balises, puis les supprimant une fois l'animation terminée, je ne vois aucun décalage visible le faire.

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

 });

Glisse vers le bas:

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

 });

Je dois rendre hommage à fletchzone.com alors que je prenais son plugin et le retirais de ce qui précède, applaudit mon pote.

wiks
la source

Merci! D'une manière ou d'une autre, cela a fonctionné pour moi: 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

Le seul problème est qu'il y a un léger délai entre les cellules.

Archimedes Trajano

41

Voici un plug-in que j'ai rédigé pour cela, il prend un peu de l'implémentation de Fletch, mais le mien est utilisé uniquement pour faire glisser une ligne vers le haut ou vers le bas (pas d'insertion de lignes).

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

Utilisation de base:

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

Passez les options de diapositive comme arguments individuels:

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

Fondamentalement, pour l'animation de diapositive vers le bas, le plug-in enveloppe le contenu des cellules dans les DIV, les anime, puis les supprime, et vice versa pour la diapositive vers le haut (avec quelques étapes supplémentaires pour se débarrasser du remplissage des cellules). Il renvoie également l'objet sur lequel vous l'avez appelé, vous pouvez donc enchaîner des méthodes comme ceci:

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

J'espère que cela aide quelqu'un.

Vinny
la source

Et si je veux ajouter / supprimer un groupe de lignes? Je dois donner une fonctionnalité Master / Detail

Volatil3

La fonction de rappel se déclenche immédiatement pour moi.

Justin

C'est tout simplement exhibant. Fonctionne très bien (mais n'a pas testé la fonctionnalité de rappel). Un jour, je connais suffisamment jQuery pour pouvoir faire de l'ingénierie inverse.

cartbeforehorse

1

FYI: Cela semble rompre si le contenu de la ligne cible est une autre table. Je n'ai pas le temps d'aller plus loin, mais ce que j'ai trouvé, c'est qu'il réduit la table enfant, définit toutes les lignes comme masquées, ajoute un rembourrage étrange, puis il ne développera pas ces lignes une fois que vous appelez slideRow ('vers le bas').

Chris Porter

1

J'ai rencontré les mêmes problèmes que d'autres avec des tables enfants agissant de manière drôle lors de l'appel de slideRow ('up') puis slideRow ('down'). J'ai compris que c'était à cause de la méthode find ('td') utilisée deux fois dans le plugin. J'ai changé cela pour les enfants («td») et les problèmes ont immédiatement disparu. Pour les problèmes avec les cellules e, mettez simplement à jour les deux instances d'enfants ('td') en enfants ('td, th').

OregonJeff

4

Vous pouvez essayer d'envelopper le contenu de la ligne dans un <span>et d'avoir votre sélecteur $('#detailed_edit_row span');- un peu hackish, mais je viens de le tester et cela fonctionne. J'ai également essayé la table-rowsuggestion ci-dessus et cela ne semble pas fonctionner.

mise à jour : j'ai joué avec ce problème, et de toutes les indications jQuery a besoin de l'objet sur lequel il exécute slideDown pour être un élément de bloc. Donc, pas de dés. J'ai pu évoquer un tableau où j'ai utilisé slideDown sur une cellule et cela n'a pas affecté la disposition du tout, donc je ne sais pas comment le vôtre est configuré. Je pense que votre seule solution est de refaçonner la table de manière à ce que cette cellule soit un bloc, ou juste .show();la fichue chose. Bonne chance.

Paolo Bergantino
la source

1

Vous ne pouvez pas animer de balises tr et td. Vous devez envelopper le contenu de chaque td avec un div, puis animer le div, puis masquer / afficher le tr:<td><div style="display:block">contents</div></td>

Andrew

4

Sélectionnez le contenu de la ligne comme ceci:

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

.contents () - Récupère les enfants de chaque élément dans l'ensemble des éléments correspondants, y compris les nœuds de texte et de commentaire.

jaywiz
la source

Vous devez également sélectionner la colonne également, donc quelque chose comme $('tr > td').contents().slideDown(). Assurez-vous que tout le contenu à l'intérieur de la colonne est enveloppé dans une balise, c'est-à-dire qu'avoir <td>Some text</td>ne fonctionnera pas. C'est la solution la plus simple.

user2233706

3

Je suis un peu en retard pour répondre à cela, mais j'ai trouvé un moyen de le faire :)

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

Je viens de mettre un élément div à l'intérieur des balises de données de la table. lorsqu'elle est définie comme visible, au fur et à mesure que le div se développe, la ligne entière descend. puis dites-lui de disparaître (puis de temporiser pour voir l'effet) avant de masquer à nouveau la ligne du tableau :)

J'espère que cela aide quelqu'un!

Andrew
la source

3

J'ai créé un tableau avec des lignes cachées qui se glissent dans et hors de la vue lors du clic de ligne.

Afficher l'extrait de code

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

Développer l'extrait

Michael
la source

3

Avoir une ligne de table avec une table imbriquée:

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

Pour faire glisser la ligne vers le bas :

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

Remarque: la ligne et son contenu (le voici "table") doivent être cachés avant le début de l'animation.

Pour faire glisser la ligne:

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

Le deuxième paramètre ( function()) est un rappel.

Facile!!

Notez qu'il existe également plusieurs options qui peuvent être ajoutées en tant que paramètres des fonctions de défilement vers le haut / vers le bas (les plus courantes étant les durées de 'slow'et 'fast').

Staline Gino
la source

Avez-vous réellement mis votre contenu entre vos lignes, ou était-ce une faute de frappe?

Vincent

2

J'ai contourné cela en utilisant les éléments td de la ligne:

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

L'animation de la ligne elle-même provoque un comportement étrange, principalement des problèmes d'animation asynchrone.

Pour le code ci-dessus, je souligne une ligne qui est glissée et déposée dans le tableau pour souligner que la mise à jour a réussi. J'espère que cela aide quelqu'un.

Johann
la source

Je reçoiseffect is not a function

Savage

2

J'ai utilisé les idées fournies ici et j'ai rencontré des problèmes. Je les ai tous réparés et j'ai une doublure lisse que je voudrais partager.

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

Il utilise css sur l'élément td. Il réduit la hauteur à 0px. De cette façon, seule la hauteur du contenu du div-wrapper nouvellement créé à l'intérieur de chaque élément td est importante.

Le slideUp est lent. Si vous le rendez encore plus lent, vous pourriez réaliser un petit problème. Un petit saut au début. Cela est dû au paramètre css mentionné. Mais sans ces paramètres, la ligne ne diminuerait pas en hauteur. Seul son contenu le ferait.

À la fin, l'élément tr est supprimé.

La ligne entière ne contient que JQuery et pas de Javascript natif.

J'espère que ça aide.

Voici un exemple de code:

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

vent noir
la source

Ce poste a exactement deux ans. J'ai travaillé avec jquery version 3.2.0. J'ai testé le code aujourd'hui avec Chrome 73.0.3683.75 et cela a fonctionné.

darkwind

1

Je veux faire glisser tout le corps et j'ai réussi ce problème en combinant les effets de fondu et de diapositive.

Je l'ai fait en 3 étapes (les 2e et 3e étapes sont remplacées au cas où vous voudriez glisser vers le bas ou vers le haut)

Attribution de la hauteur au corps,
Fading all td and th,
Corps coulissant.

Exemple de slideUp:

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

Biter
la source

Cela n'affecte-t-il pas l'ensemble du tableau, au lieu d'une seule ligne particulière?

Savage

1

J'ai eu des problèmes avec toutes les autres solutions proposées mais j'ai fini par faire cette chose simple qui est lisse comme du beurre.

Configurez votre HTML comme ceci:

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

Ensuite, configurez votre javascript comme ceci:

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

Fondamentalement, rendez la ligne "invisible" haute de 0 px, avec un div à l'intérieur.
Utilisez l'animation sur le div (pas sur la ligne), puis définissez la hauteur de la ligne sur 1 px.

Pour masquer à nouveau la ligne, utilisez l'animation opposée sur la div et redéfinissez la hauteur de la ligne sur 0 px.

Vincent
la source

1

J'ai aimé le plugin que Vinny a écrit et utilise. Mais dans le cas de tables à l'intérieur d'une ligne coulissante (tr / td), les lignes de la table imbriquée sont toujours masquées même après avoir glissé vers le haut. J'ai donc fait un hack simple et rapide dans le plugin pour ne pas cacher les lignes de la table imbriquée. Modifiez simplement la ligne suivante

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

à

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

qui ne trouve que les tds immédiats et non imbriqués. J'espère que cela aide quelqu'un à utiliser le plugin et à avoir des tables imbriquées.

rajug
la source

1

Je voudrais ajouter un commentaire au message de # Vinny, mais je n'ai pas de représentant, alors je dois poster une réponse ...

Trouvé un bug avec votre plugin - lorsque vous passez simplement un objet avec des arguments, ils sont remplacés si aucun autre argument n'est transmis. Facilement résolu en modifiant l'ordre de traitement des arguments, code ci-dessous. J'ai également ajouté une option pour détruire la ligne après la fermeture (uniquement si j'en avais besoin!): $ ('# Row_id'). SlideRow ('up', true); // détruit la ligne

(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
la source

J'ai oublié de mentionner que j'ai également ajouté des correctifs pour les enfants et les enfants

Mark Ball

0

Si vous devez faire glisser et estomper une ligne de tableau en même temps, essayez de les utiliser:

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
la source

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

vous pouvez utiliser ces méthodes comme:

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
la source

0

Je peux le faire si vous définissez les td dans la ligne pour n'en afficher aucun en même temps que vous commencez à animer la hauteur sur la ligne

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
la source

0

Ce code fonctionne!

<!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
la source

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

});

Ours ours
la source

Cela montre et cache un div contenant une table. Pas une ligne de tableau comme l'OP l'a demandé.

shazbot

0

La prise offerte par Vinny est vraiment proche, mais j'ai trouvé et corrigé quelques petits problèmes.

Il visait goulûment les éléments td au-delà des seuls enfants de la rangée qui étaient cachés. Cela aurait été plutôt bien s'il avait ensuite recherché ces enfants lors de la présentation de la rangée. Alors que cela se rapprochait, ils se sont tous retrouvés avec "display: none" sur eux, les rendant cachés.
Il ne ciblait pas du tout les enfants.

Pour les cellules de tableau avec beaucoup de contenu (comme un tableau imbriqué avec beaucoup de lignes), en appelant slideRow ('up'), quelle que soit la valeur slideSpeed fournie, cela réduirait la vue de la ligne dès que l'animation de remplissage était terminée . Je l'ai corrigé pour que l'animation de remplissage ne se déclenche pas tant que la méthode slideUp () sur le wrapping n'est pas terminée.

(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
la source

@circuitry, aviez-vous quelque chose de spécifique à offrir ou votre critique est-elle suffisante?

OregonJeff

@Oregoneff Juste pour être honnête. Je cherche quelque chose de plus simple. Il ne faut pas 109 lignes de code pour faire glisser une ligne de tableau.

circuits

@circuitry, cela ne devient pas plus simple si vous voulez pouvoir utiliser en tant que plugin (et pas seulement vous engager dans la mauvaise pratique du code spécifique à l'utilisation) avec la possibilité de contrôler la vitesse, l'assouplissement et les rappels sur un personnalisable base. Étant donné que c'est quelque chose que vous incluriez dans votre bibliothèque de code et que vous pouvez utiliser pour toute implémentation qui nécessite de développer / réduire des lignes de table, je ne sais pas pourquoi il importe que ce soit 109 lignes de code.

OregonJeff

0

Solution rapide / facile:

Utilisez JQuery .toggle () pour afficher / masquer les lignes en cliquant sur Row ou sur une ancre.

Une fonction devra être écrite pour identifier les lignes que vous souhaitez masquer, mais la bascule crée la fonctionnalité que vous recherchez.

Daniel Adams
la source

Je pense que cela a déjà été suggéré dans cette réponse ...

DarkCygnus

Comment utiliser la fonction slideDown (ou show) sur une ligne de tableau?

Réponses:

Pour faire glisser la ligne vers le bas :

Pour faire glisser la ligne: