Wie verwende ich die Funktion „slideDown“ (oder „show“) für eine Tabellenzeile?

https://stackoverflow.com/questions/467336

19-08-2019
|

Frage

Ich versuche, einer Tabelle eine Zeile hinzuzufügen und diese Zeile anzuzeigen, aber die Slidedown-Funktion scheint der Tabellenzeile einen display:block-Stil hinzuzufügen, der das Layout durcheinander bringt.

Irgendwelche Ideen, wie man das umgehen kann?

Hier ist der Code:

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

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

Lösung

Animationen sind nicht auf Tabellenzeilen unterstützt.

Von "Learning jQuery" von Chaffer und Swedberg

Tischreihen präsentieren insbesondere Hindernisse für Animation, da Browser verwenden unterschiedliche Werte (Tabelle-Reihe und Block) für die sichtbare Anzeige Eigentum. Die .Hide () und .show () Methoden, ohne Animation, sind immer Safe mit Tabellenzeilen zu verwenden. Ab jQuery-Version 1.1.3, .fadeIn () und .fadeOut () kann ebenfalls verwendet werden.

Sie können Ihre td Inhalte in einem div wickeln und die slidedown auf diese verwenden. Sie müssen entscheiden, ob die Animation wert, das zusätzliche Markup ist.

Andere Tipps

ich wickeln einfach die tr dynamisch dann entfernen, sobald die slideUp / slidedown komplett hat. Es ist ein ziemlich kleiner Kopf Zugabe und eine oder ein paar Umbauten zu entfernen und entfernen Sie sie dann, sobald die Animation abgeschlossen ist, ich sehe keine sichtbare Verzögerung überhaupt, es zu tun.

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

 });

slidedown:

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

 });

Ich habe Tribut an fletchzone.com zu zahlen, wie ich sein Plugin nahm und gestrippt es zurück zu dem oben genannten, prost Kumpel.

Hier ist ein Plug-in, dass ich dies schrieb auf, nimmt es ein wenig von Fletchs Implementierung, sondern Mine verwendet wird, nur eine Zeile nach oben oder unten (keine Einfügen von Zeilen) gleiten zu lassen.

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

Grundsätzliche Verwendung:

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

Pass Schieber Optionen als einzelne Argumente:

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

Im Grunde genommen für den Schlitten nach unten Animation, wickelt das Plug-in den Inhalt der Zellen in DIVs, jene beseelt, dann entfernt sie und umgekehrt für die Folie nach oben (mit einigen zusätzlichen Schritten der Zelle padding loszuwerden ). Es gibt auch das Objekt Sie es aufgerufen, so kann man Ketten Methoden wie folgt:

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

Hoffe, das hilft jemand.

Sie könnten versuchen, den Inhalt der Zeile in einer <span> Einwickeln und Ihre Wähler $('#detailed_edit_row span'); werden mit - ein bisschen hackish, aber ich es getestet und es funktioniert. Ich habe auch versucht die table-row Vorschlag oben und es nicht zu funktionieren scheint.

Update : Ich habe um mit diesem Problem gespielt, und von allen Indikationen benötigt jQuery das Objekt führt sich auf ein Blockslidedown Element zu sein. Also, keine Würfel. Ich war in der Lage, einen Tisch zu zaubern, wo ich auf slidedown einer Zelle verwendet und es hat nicht das Layout beeinflussen überhaupt, also bin ich nicht sicher, wie Ihr eingerichtet ist. Ich denke, die einzige Lösung ist, die Tabelle so zu umgestalten, dass es in Ordnung ist mit der Zelle ein Block, oder einfach nur .show(); das verdammte Ding zu sein. Viel Glück.

Wählen Sie den Inhalt der Zeile wie folgt aus:

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

.contents () - Holen Sie sich die Kinder jedes Elements in dem Satz von abgestimmten Elementen, einschließlich Text und Kommentar-Knoten.

Ich bin ein wenig hinter der Zeit dies zu beantworten, aber ich habe einen Weg gefunden, es zu tun:)

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

Ich habe nur ein div-Element innerhalb der Tabellendaten-Tags. wenn es sichtbar gesetzt, wie die div erweitert, kommt die ganze Zeile nach unten. sagen, es dann verblassen wieder nach oben (dann Timeout, so dass Sie den Effekt), bevor die Tabellenzeile wieder versteckt:)

Hoffe, das hilft jemand!

einen Neuling auf diese Gemeinschaft im. Pl bewerten meine Antwort. :)

Sie können diese finden funktionieren.

Im eine Tabelle (<table style='display: none;'></table>) mit

innerhalb des <tr class='dummyRow' style='display: none;'><td></td></tr> Inhalt.

Um die Zeile nach unten rutschen ..

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

Hinweis: Zeile und der Inhalt in Reihe (hier ist es table) sowohl vor als Animation beginnt versteckt werden sollte

Um die Zeile nach oben schieben ..

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

zweite Parameter (Funktion) ist ein Rückruf.

Einfach !!

Ich habe durch die Verwendung der td-Elemente in der Reihe um diese bekommen:

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

Animieren die Reihe selbst verursacht seltsames Verhalten, meist Asynchron-Animation Probleme.

Für den obigen Code, ich hervorheben eine Zeile, die und fiel um markieren in der Tabelle gezogen wird, dass das Update erfolgreich ist. Hoffe, das hilft jemand.

neded ich eine Tabelle mit versteckten Zeilen, die auf Zeile Klick in der und aus der Sicht schieben.

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

habe ich die Ideen, die hier zur Verfügung gestellt nutzen und konfrontiert einige Probleme. Ich reparierte sie alle und habe einen glatten Einzeiler Ich mag würde teilen.

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

Es nutzt CSS auf dem td-Elemente. Es reduziert die Höhe 0px. Auf diese Weise nur die Höhe des Inhalts des neu geschaffenen div-Wrapper innerhalb jedes Element td Angelegenheiten.

Die slideUp ist auf langsam. Wenn Sie es noch langsamer machen könnten Sie etwas Glitch realisieren. Ein kleiner Sprung am Anfang. Dies ist wegen der CSS-Einstellung erwähnt. Aber ohne diese Einstellungen würde die Zeile nicht in der Höhe verringern. Nur sein Gehalt würde.

Am Ende des tr-Element entfernt wird.

Die ganze Zeile enthält nur JQuery und keine native Javascript.

Hoffe, es hilft.

Hier ist ein Beispielcode:

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

Ich will ganz tbody gleiten und ich habe dieses Problem verwaltet von verblassen und Dia-Effekte kombiniert werden.

Ich habe dies in 3 Stufen durchgeführt (2. und 3. Schritte im Falle ersetzt werden möchten, dass Sie oder bis gleiten)

Zuweisen von Höhe zu tbody,
Verblassen alle td und th,
Schiebe tbody.

Beispiel von slideUp:

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

Ich hatte Probleme mit allen anderen Lösungen angeboten, aber am Ende tun, diese einfache Sache, wie Butter glatt ist.

Richten Sie Ihre HTML etwa so:

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

Dann richten Sie Javascript in etwa so:

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

Im Grunde macht die „unsichtbare“ Reihe 0px hoch, mit einem div innen.
Verwenden Sie die Animation auf dem div (nicht die Zeile) und legen Sie die Zeilenhöhe auf 1px.

die Zeile wieder auszublenden, die entgegengesetzte Animation auf dem div verwenden und die Zeilenhöhe auf 0px zurückwerfen.

Ich mochte das Plugin, dass Vinny geschrieben und verwendet haben. Aber im Fall von Tabellen innerhalb Schiebt Zeile (tr / td) werden die Reihen von verschachtelter Tabelle immer versteckt auch nach oben geschoben. Also habe ich ein schneller und einfacher Hack in dem Plugin nicht die Reihen der verschachtelten Tabelle zu verbergen. Ändern Sie einfach die folgende Zeile

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

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

, die nur unmittelbare tds nicht verschachtelt diejenigen findet. Hoffe, das hilft jemand das Plugin und haben verschachtelte Tabellen.

Ich möchte einen Kommentar zu # Vinny Beitrag hinzufügen, aber die rep nicht haben so eine Antwort schreiben ...

einen Fehler mit Ihrem Plugin gefunden - wenn Sie nur ein Objekt übergeben in mit Argumenten sie überschrieben, wenn keine anderen Argumente übergeben werden leicht gelöst durch Änderung der Reihenfolge der Argumente verarbeitet werden, unter Code.. Ich habe auch eine Option für die Zerstörung der Reihe nach dem Schließen hinzugefügt (nur wie ich es ein Bedürfnis hatte!). $ ( ‚# Row_id‘) slideRow ( ‚up‘, true); // zerstört die Zeile

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

Wenn Sie eine Tabellenzeile in der gleichen Zeit gleiten und verblassen, versuchen Sie diese mit:

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

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

Sie können diese Methoden wie verwenden:

jQuery("[data-toggle-tr-trigger]").click(function() {
  var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
  if($tr.is(':hidden')) {
    showTr($tr);
  } else {
    hideTr($tr);
  }
});

kann ich tun, wenn Sie die TDs in der Reihe gesetzt keines zur gleichen Zeit anzuzeigen, die Sie starten Animieren die Höhe auf der Zeile

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

Dieser Code funktioniert!

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

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

});

Der von Vinny angebotene Stecker ist Wirklich schließen, aber ich habe ein paar kleine Probleme gefunden und behoben.

Es zielte gierig auf td-Elemente ab, die über die untergeordneten Elemente der auszublendenden Zeile hinausgingen.Das wäre einigermaßen in Ordnung gewesen, wenn diese Kinder dann beim Anzeigen der Zeile herausgesucht hätten.Während es knapp wurde, endeten alle mit „display:„Keine“ auf ihnen, wodurch sie verborgen bleiben.
Es zielte überhaupt nicht auf untergeordnete Elemente ab.

Bei Tabellenzellen mit viel Inhalt (z. B. einer verschachtelten Tabelle mit vielen Zeilen) würde der Aufruf von slideRow('up') unabhängig vom angegebenen slideSpeed-Wert die Ansicht der Zeile reduzieren, sobald die Auffüllanimation abgeschlossen ist .Ich habe es behoben, sodass die Auffüllanimation erst dann ausgelöst wird, wenn die slideUp()-Methode für den Umbruch abgeschlossen ist.

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

Schnell / Easy Fix:

Mit JQuery .toggle () Ein- / Ausblenden der Zeilen Onclick entweder Zeile oder einem Anker.

Eine Funktion müssen geschrieben werden, um die Zeilen zu identifizieren, die Sie versteckt haben möchten, aber Toggle schafft die Funktionalität, die Sie suchen.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow