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

J’essaie d’append une ligne à une table et de faire glisser cette ligne dans la vue, mais la fonction slidedown semble append un affichage: style de bloc à la ligne du tableau, ce qui perturbe la mise en page.

Des idées sur la façon de 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); } ); 

    Les animations ne sont pas sockets en charge sur les lignes de tableau.

    De “Learning jQuery” de Chaffer et Swedberg


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


    Vous pouvez envelopper votre contenu td dans un div et utiliser le slideDown. Vous devez décider si l’animation vaut le balisage supplémentaire.

    J’emballe simplement le tr dynamicment puis le supprime une fois le slideUp / slideDown terminé. Il s’agit d’une petite charge supplémentaire qui consiste à append et supprimer un ou plusieurs tags et à les supprimer une fois l’animation terminée. Je ne vois aucun retard visible.

    SlideUp :

     $('#my_table > tbody > tr.my_row') .find('td') .wrapInner('
    ') .parent() .find('td > div') .slideUp(700, function(){ $(this).parent().parent().remove(); });

    Glisse vers le bas:

     $('#my_table > tbody > tr.my_row') .find('td') .wrapInner('
    ') .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 que je le ramenais à ce qui précède, pour encourager mon pote.

    Voici un plug-in que j’ai écrit pour cela, cela prend un peu de l’implémentation de Fletch, mais le mien est utilisé uniquement pour faire glisser une ligne vers le haut ou 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 == 'ssortingng'){ 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('
    '); 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 == 'ssortingng'){ 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(''); $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 diapositives en tant qu’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 déroulante, le plug-in encapsule le contenu des cellules dans DIVs, les anime, puis les supprime, et inversement pour la diapositive (avec quelques étapes supplémentaires pour se débarrasser du remplissage de la cellule). Il renvoie également l’object sur lequel vous l’avez appelé, vous pouvez donc enchaîner les méthodes comme suit:

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

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

    Vous pouvez essayer d’envelopper le contenu de la ligne dans un et avoir votre sélecteur sur $('#detailed_edit_row span'); – un peu piraté, mais je viens de le tester et ça marche. J’ai également essayé la suggestion de table-row dessus et cela ne semblait pas fonctionner.

    update : J’ai joué avec ce problème et de toutes les indications jQuery a besoin de l’object qu’il utilise slideDown pour être un élément de bloc. Donc, pas de dés. J’ai pu créer une table dans laquelle j’ai utilisé slideDown sur une cellule et cela n’a eu aucune incidence sur la mise en page. Je ne suis donc pas sûr de la configuration de la vôtre. Je pense que votre seule solution est de refactoriser la table de telle sorte qu’elle soit correcte avec cette cellule en tant que bloc, ou simplement .show(); la foutue chose Bonne chance.

    Je suis un peu en retard pour répondre à cette question, mais j’ai trouvé le 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 dans les balises de données de la table. quand il est visible, au fur et à mesure que la div se développe, toute la ligne descend. Dites-lui ensuite de revenir en arrière (puis expirez pour voir l’effet) avant de cacher à nouveau la ligne de la table 🙂

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

    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.

    Je suis un débutant dans cette communauté. Évaluez ma réponse. 🙂

    Vous pouvez trouver celui-ci fonctionne bien.

    Je possède une table (

    )

    dans le

    contenu.

    Pour glisser vers le bas de la rangée ..

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

    Note: la ligne et le contenu dans la ligne (ici la table ) doivent être masqués avant le début de l’animation.

    Pour faire glisser la rangée ..

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

    deuxième paramètre (fonction) est un rappel.

    Simple!!

    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 déplacée et déplacée dans la table pour mettre en évidence que la mise à jour a réussi. J’espère que cela aide quelqu’un.

    Je veux glisser tout le monde et j’ai géré ce problème en combinant des effets de fondu et de diapositive.

    Je l’ai fait en 3 étapes (les 2ème et 3ème étapes sont remplacées si vous voulez glisser vers le bas ou vers le haut)

    1. Assigner la hauteur à tbody,
    2. Fading all td et th,
    3. Coulissant tbody.

    Exemple de slideUp:

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

    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 code HTML comme suit:

        

    Ensuite, configurez votre javascript comme suit:

     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, rendre la ligne “invisible” 0px haut, avec un div à l’intérieur.
    Utilisez l’animation sur le div (pas la ligne), puis définissez la hauteur de la ligne sur 1px.

    Pour masquer à nouveau la ligne, utilisez l’animation opposée sur le div et réglez la hauteur de la ligne sur 0px.

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

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

    à

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

    qui ne trouve que des tds immédiats pas des nesteds. J’espère que cela aide quelqu’un qui utilise le plugin et a des tables nestedes.

    Je voudrais append un commentaire à l’article de # Vinny, mais je n’ai pas besoin que le représentant publie une réponse …

    Vous avez trouvé un bogue avec votre plugin – lorsque vous transmettez simplement un object avec des arguments, ils sont écrasés si aucun autre argument n’est passé. J’ai aussi 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 rangée

     (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 == 'ssortingng') { 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('
    '); 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 == 'ssortingng') { 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(''); $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);

    J’ai utilisé les idées fournies ici et j’ai rencontré des problèmes. Je les ai tous corrigés et j’ai une doublure lisse que j’aimerais partager.

     $('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('
    ').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 diaporama est lent. Si vous le rendez encore plus lent, vous pourriez réaliser un problème. Un petit saut au début. C’est à cause du paramètre css mentionné. Mais sans ces réglages, 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 cela aide.

    J’ai créé un tableau contenant des lignes masquées qui glissaient et claquaient sur les lignes.

     $('.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; } 
      
    col 1 col 2 col 3
    col 1 col 2 col 3
    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 sortingstique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ulsortingcies 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 sortingstique 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.
    col 1 col 2 col 3
    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 sortingstique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ulsortingcies 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 sortingstique 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.
    col 1 col 2 col 3

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

     jQuery.fn.prepareTableRowForSliding = function() { $tr = this; $tr.children('td').wrapInner('
    '); return $tr; }; jQuery.fn.slideFadeTableRow = function(speed, easing, callback) { $tr = this; if ($tr.is(':hidden')) { $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); } else { $tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){ $tr.hide(); callback(); }); } return $tr; }; $(document).ready(function(){ $('tr.special').hide().prepareTableRowForSliding(); $('a.toggle').toggle(function(){ $button = $(this); $tr = $button.closest('tr.special'); //this will be specific to your situation $tr.slideFadeTableRow(300, 'swing', function(){ $button.text('Hide table row'); }); }, function(){ $button = $(this); $tr = $button.closest('tr.special'); //this will be specific to your situation $tr.slideFadeTableRow(300, 'swing', function(){ $button.text('Display table row'); }); }); });
     function hideTr(tr) { tr.find('td').wrapInner('
    ').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('
    ').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-sortinggger]").click(function() { var $tr = jQuery(this).parents(trClass).nextUntil(trClass); if($tr.is(':hidden')) { showTr($tr); } else { hideTr($tr); } }); 

    Je peux être fait si vous définissez le td dans la ligne pour 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; } } 

    Ce code fonctionne!

               
    Row 1
    Row 2
    Row 3
    Row 4

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

     
    A/C ID : 3000/A01
    A/C ID : 3000/A01
    A/C ID : 3000/A01

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

    })

    Le plug offert par Vinny est vraiment proche, mais j’ai trouvé et corrigé quelques petits problèmes.

    1. Elle ciblait avidement les éléments td au-delà des seuls enfants de la rangée cachés. Cela aurait été un peu correct s’il avait ensuite cherché ces enfants lors de la présentation de la rangée. Tandis qu’il se rapprochait, ils se sont tous retrouvés avec “display: none” sur eux, les rendant cachés.
    2. Il ne visait aucun élément enfant.
    3. Pour les cellules de table avec beaucoup de contenu (comme un tableau nested avec beaucoup de lignes), appelant slideRow (‘up’), quelle que soit la valeur slideSpeed ​​fournie, la vue de la ligne est réduite dès que l’animation de remplissage est terminée . Je l’ai corrigé afin que l’animation de remplissage ne se déclenche pas tant que la méthode slideUp () 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 == 'ssortingng'){ 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('
      '); 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 == 'ssortingng'){ 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(''); $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);

    Quick / Easy Fix:

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

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