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

214

Ich versuche, einer Tabelle eine Zeile hinzuzufügen und diese Zeile in die Ansicht zu verschieben, aber die Funktion zum Herunterschieben scheint der Tabellenzeile einen Anzeigestil hinzuzufügen: Blockstil, 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);
  }
);

jquery animation html-table slidedown Greg
quelle

Muss es ein Tisch sein? Sei viel einfacher ohne den Tisch, denke ich.

MrChrister

fadeInund fadeOutarbeite an Tabellenzeilen und mache einen schönen alternativen visuellen Effekt (nur auf Firefox getestet)

Savage

295

Animationen werden in Tabellenzeilen nicht unterstützt.

Aus "Learning jQuery" von Chaffer und Swedberg

Tabellenzeilen stellen besondere Hindernisse für die Animation dar, da Browser unterschiedliche Werte (Tabellenzeile und Block) für ihre sichtbare Anzeigeeigenschaft verwenden. Die Methoden .hide () und .show () ohne Animation können immer sicher mit Tabellenzeilen verwendet werden. Ab jQuery Version 1.1.3 können auch .fadeIn () und .fadeOut () verwendet werden.

Sie können Ihren td-Inhalt in ein div einbinden und das slideDown darauf verwenden. Sie müssen entscheiden, ob die Animation das zusätzliche Markup wert ist.

Emily
quelle

5

Funktioniert super! Es gibt noch ein kleines anderes Problem: Sie müssen auch die Zellauffüllung animieren, wenn es welche gibt. Aber das ist auch keine große Sache.

Adrian Grigore

11

Sie können die Polsterung wie folgt animieren:$('tr').find('td').animate({padding: '0px'}, {duration: 200});

Andrew

@ Emily: Könnten Sie bitte auf bestimmte Zeilen der jQuery-Quelle verweisen? Ich bin versucht, die Quelle für mein Projekt zu hacken.

Randomblue

7

Keine direkte Antwort, aber ich habe festgestellt, dass die Verwendung von fadeIn / fadeOut in den meisten Situationen fast genauso gut ist und in Tabellenzeilen in Ordnung zu sein scheint.

Phil LaNasa

@PhilLaNasa Zuerst dachte ich "Nein, das sieht nicht gut aus", aber dann habe ich es versucht und es sah wirklich gut aus! Danke für die Reise!

Kenton de Jong

157

Ich wickle das tr einfach dynamisch ein und entferne es dann, sobald das slideUp / slideDown abgeschlossen ist. Es ist ein ziemlich kleiner Aufwand, ein oder mehrere Tags hinzuzufügen und zu entfernen und sie dann zu entfernen, sobald die Animation abgeschlossen ist. Ich sehe überhaupt keine sichtbare Verzögerung dabei.

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

 });

Herunterrutschen:

$('#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 muss fletchzone.com meinen Tribut zollen, als ich sein Plugin nahm und es wieder auf das oben Gesagte zurückzog, Prost Kumpel.

Wiks
quelle

Vielen Dank! Irgendwie hat das bei mir funktioniert: row.find ('td'). WrapInner ('<div style = "display: none;" />').parent().prependTo('#MainTable> tbody'). Find (' td> div '). slideDown (' langsam ', function () {var $ set = $ (this); $ set.replaceWith ($ set.contents ());});

Pauloya

Das einzige Problem ist, dass es zwischen den Zellen eine leichte Verzögerung gibt.

Archimedes Trajano

41

Hier ist ein Plug-In, das ich dafür geschrieben habe. Es dauert ein wenig von Fletch's Implementierung, aber mein Plug-In wird nur verwendet, um eine Zeile nach oben oder unten zu schieben (kein Einfügen von Zeilen).

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

Grundlegende Verwendung:

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

Übergeben Sie Folienoptionen 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

Grundsätzlich verpackt das Plug-In für die Slide-Down-Animation den Inhalt der Zellen in DIVs, animiert diese, entfernt sie und umgekehrt für die Slide-Up-Animation (mit einigen zusätzlichen Schritten, um das Auffüllen der Zellen zu beseitigen). Es gibt auch das Objekt zurück, für das Sie es aufgerufen haben, sodass Sie Methoden wie folgt verketten können:

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

Hoffe das hilft jemandem.

Vinny
quelle

Was ist, wenn ich eine Gruppe von Zeilen hinzufügen / entfernen möchte? Ich muss eine Master / Detail-Funktionalität geben

Volatil3

Die Rückruffunktion wird für mich sofort ausgelöst.

Justin

Das ist einfach nur Angeberei. Funktioniert aber super (obwohl ich die Rückruffunktion nicht getestet habe). Eines Tages werde ich genug jQuery kennen, um das rückentwickeln zu können.

Cartbeforehorse

1

Zu Ihrer Information: Dies scheint zu brechen, wenn der Inhalt der Zielzeile eine andere Tabelle ist. Ich habe keine Zeit, weiter zu gehen, aber ich habe festgestellt, dass die untergeordnete Tabelle reduziert, alle Zeilen ausgeblendet, seltsame Auffüllungen hinzugefügt und diese Zeilen nach dem Aufruf von slideRow nicht erneut erweitert werden ('Nieder').

Chris Porter

1

Ich hatte die gleichen Probleme wie andere mit untergeordneten Tabellen, die sich beim Aufrufen von slideRow ('up') und dann slideRow ('down') lustig verhielten. Ich habe herausgefunden, dass dies daran liegt, dass die Methode find ('td') im Plugin zweimal verwendet wird. Ich habe dies in Kinder ('td') geändert und die Probleme gingen sofort weg. Aktualisieren Sie bei Problemen mit den Zellen einfach beide Instanzen von Kindern ('td') auf Kinder ('td, th').

OregonJeff

4

Sie könnten versuchen, den Inhalt der Zeile in a zu wickeln <span>und Ihren Selektor zu haben $('#detailed_edit_row span');- ein bisschen hackisch, aber ich habe es gerade getestet und es funktioniert. Ich habe auch den table-rowobigen Vorschlag ausprobiert und es schien nicht zu funktionieren.

Update : Ich habe mit diesem Problem herumgespielt und nach allen Angaben benötigt jQuery das Objekt, auf dem slideDown ausgeführt wird, um ein Blockelement zu sein. Also keine Würfel. Ich konnte eine Tabelle erstellen, in der ich slideDown für eine Zelle verwendet habe und die das Layout überhaupt nicht beeinflusst hat. Daher bin ich mir nicht sicher, wie Ihre eingerichtet ist. Ich denke, Ihre einzige Lösung besteht darin, die Tabelle so umzugestalten, dass es in Ordnung ist, wenn diese Zelle ein Block ist oder nur .show();das verdammte Ding. Viel Glück.

Paolo Bergantino
quelle

1

Sie können tr- und td-Tags nicht animieren. Sie müssen den Inhalt jedes td mit einem div umschließen, dann das div animieren und dann das tr ausblenden / anzeigen:<td><div style="display:block">contents</div></td>

Andrew

4

Wählen Sie den Inhalt der Zeile folgendermaßen aus:

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

.contents () - Ruft die untergeordneten Elemente jedes Elements in den Satz übereinstimmender Elemente ab, einschließlich Text- und Kommentarknoten.

jaywiz
quelle

Sie müssen auch die Spalte auswählen, also so etwas wie $('tr > td').contents().slideDown(). Stellen Sie sicher, dass der gesamte Inhalt der Spalte in ein Tag eingeschlossen ist, dh <td>Some text</td>nicht funktioniert. Dies ist die einfachste Lösung.

user2233706

3

Ich bin etwas hinter der Zeit zurück, als ich darauf antwortete, 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 gerade ein div-Element in die Tabellendaten-Tags eingefügt. Wenn es sichtbar ist und sich das Div ausdehnt, wird die gesamte Zeile heruntergefahren. Dann sag ihm, er soll wieder einblenden (dann Timeout, damit du den Effekt siehst), bevor die Tabellenzeile wieder ausgeblendet wird :)

Hoffe das hilft jemandem!

Andrew
quelle

3

Ich habe eine Tabelle mit versteckten Zeilen erstellt, die beim Klicken auf eine Zeile ein- und ausgeblendet werden.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Michael
quelle

3

Haben Sie eine Tabellenzeile mit verschachtelter Tabelle:

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

So schieben Sie die Zeile herunter :

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

Hinweis: Die Zeile und ihr Inhalt (hier ist es "table") sollten beide ausgeblendet werden, bevor die Animation beginnt.

So schieben Sie die Zeile hoch :

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

Der zweite Parameter ( function()) ist ein Rückruf.

Einfach!!

Beachten Sie, dass es auch mehrere Optionen gibt, die als Parameter für die Auf- / Ab-Funktionen des Schiebers hinzugefügt werden können (am häufigsten sind die Dauer von 'slow'und 'fast').

Stalin Gino
quelle

Haben Sie Ihren Inhalt tatsächlich zwischen Ihre Zeilen gestellt oder war das ein Tippfehler?

Vincent

2

Ich habe dies umgangen, indem ich die td-Elemente in der Zeile verwendet habe:

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

Das Animieren der Zeile selbst verursacht seltsames Verhalten, meistens asynchrone Animationsprobleme.

Für den obigen Code hebe ich eine Zeile hervor, die in die Tabelle gezogen und dort abgelegt wird, um hervorzuheben, dass die Aktualisierung erfolgreich war. Hoffe das hilft jemandem.

Johann
quelle

Ich bekommeeffect is not a function

Savage

2

Ich habe die hier bereitgestellten Ideen verwendet und war mit einigen Problemen konfrontiert. Ich habe sie alle repariert und habe einen glatten Einzeiler, den ich gerne teilen möchte.

$('#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 verwendet CSS für das Element td. Es reduziert die Höhe auf 0px. Auf diese Weise ist nur die Höhe des Inhalts des neu erstellten Div-Wrappers in jedem td-Element von Bedeutung.

Das slideUp ist langsam. Wenn Sie es noch langsamer machen, können Sie einen Fehler feststellen. Ein kleiner Sprung am Anfang. Dies liegt an der genannten CSS-Einstellung. Ohne diese Einstellungen würde die Höhe der Reihe jedoch nicht abnehmen. Nur sein Inhalt würde.

Am Ende wird das tr-Element entfernt.

Die gesamte Zeile enthält nur JQuery und kein natives Javascript.

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

Dunkelwind
quelle

Dieser Beitrag ist genau zwei Jahre alt. Ich habe mit jquery Version 3.2.0 gearbeitet. Ich habe den Code heute mit Chrome 73.0.3683.75 getestet und es hat funktioniert.

Dunkelwind

1

Ich möchte einen ganzen Körper schieben und habe dieses Problem durch die Kombination von Überblendungs- und Schiebeeffekten gelöst.

Ich habe dies in 3 Schritten gemacht (2. und 3. Schritt werden ersetzt, falls Sie nach unten oder oben rutschen möchten)

Körpergröße zuweisen,
Alle td und th verblassen,
Schiebekörper.

Beispiel für slideUp:

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

Beißer
quelle

Betrifft dies nicht die gesamte Tabelle anstatt nur eine bestimmte Zeile?

Savage

1

Ich hatte Probleme mit allen anderen angebotenen Lösungen, tat aber schließlich diese einfache Sache, die glatt wie Butter ist.

Richten Sie Ihren HTML-Code folgendermaßen ein:

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

Dann richten Sie Ihr Javascript folgendermaßen ein:

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

Grundsätzlich machen Sie die "unsichtbare" Zeile 0px hoch, mit einem Div im Inneren.
Verwenden Sie die Animation für das Div (nicht für die Zeile) und stellen Sie die Zeilenhöhe auf 1 Pixel ein.

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

Vincent
quelle

1

Ich mochte das Plugin, das Vinny geschrieben hat und verwendet hat. Bei Tabellen innerhalb der verschiebbaren Zeile (tr / td) werden die Zeilen der verschachtelten Tabelle jedoch auch nach dem Verschieben immer ausgeblendet. Also habe ich schnell und einfach das Plugin gehackt, um die Zeilen der verschachtelten Tabelle nicht zu verbergen. Ändern Sie einfach die folgende Zeile

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

zu

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

das findet nur unmittelbare tds nicht verschachtelte. Hoffe, dies hilft jemandem, der das Plugin verwendet und verschachtelte Tabellen hat.

Rajug
quelle

1

Ich möchte # Vinnys Post einen Kommentar hinzufügen, habe aber keinen Repräsentanten, also muss ich eine Antwort posten ...

Es wurde ein Fehler in Ihrem Plugin gefunden. Wenn Sie ein Objekt nur mit Argumenten übergeben, werden diese überschrieben, wenn keine anderen Argumente übergeben werden. Einfach zu beheben, indem Sie die Reihenfolge ändern, in der die Argumente verarbeitet werden. Code unten. Ich habe auch eine Option zum Zerstören der Zeile nach dem Schließen hinzugefügt (nur weil ich sie brauchte!): $ ('# 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);

Mark Ball
quelle

Ich habe vergessen zu erwähnen, dass ich auch in den Kinder- und Korrekturen hinzugefügt habe

Mark Ball

0

Wenn Sie eine Tabellenzeile gleichzeitig verschieben und ausblenden müssen, versuchen Sie Folgendes:

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
quelle

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

Sie können diese Methoden wie folgt 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);
  }
});

Zernel
quelle

0

Ich kann dies tun, wenn Sie die td's in der Zeile so einstellen, dass keine angezeigt werden, während Sie mit der Animation der Höhe in der Zeile beginnen

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
quelle

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>

Tuvia Khusid
quelle

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

});

Bär Bär
quelle

Dies zeigt und versteckt ein Div, das eine Tabelle enthält. Keine Tabellenzeile, wie das OP gefragt hat.

Shazbot

0

Der von Vinny angebotene Stecker ist sehr nah, aber ich habe ein paar kleine Probleme gefunden und behoben.

Es zielte gierig auf td Elemente ab, die über die versteckten Kinder der Reihe hinausgingen. Das wäre in Ordnung gewesen, wenn es dann diese Kinder beim Zeigen der Reihe aufgesucht hätte. Während es nah wurde, endeten sie alle mit "display: none" und machten sie versteckt.
Es zielte überhaupt nicht auf untergeordnete Elemente ab.

Bei Tabellenzellen mit viel Inhalt (wie einer verschachtelten Tabelle mit vielen Zeilen) wird beim Aufrufen von slideRow ('up') unabhängig vom angegebenen slideSpeed-Wert die Ansicht der Zeile reduziert, sobald die Auffüllanimation ausgeführt wurde . Ich habe es behoben, damit die Auffüllanimation erst ausgelöst wird, wenn die slideUp () -Methode für den Wrapping 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);

OregonJeff
quelle

@circuitry, hattest du etwas spezielles zu bieten oder reicht deine kritik aus?

OregonJeff

@Oregoneff Nur um ehrlich zu sein. Ich suche etwas Einfacheres. Es sollten keine 109 Codezeilen erforderlich sein, um eine Tabellenzeile zu verschieben.

Schaltung

@circuitry, es wird nicht einfacher, wenn Sie in der Lage sein möchten, als Plugin (und nicht nur in der schlechten Praxis des verwendungsspezifischen Codes) die Geschwindigkeit zu steuern, zu vereinfachen und Rückrufe auf einem anpassbaren zu haben Basis. Da dies etwas ist, das Sie in Ihre Codebibliothek aufnehmen würden und das für jede Implementierung verwendet werden kann, die das Erweitern / Reduzieren von Tabellenzeilen erfordert, bin ich mir nicht sicher, warum es wichtig ist, dass es sich um 109 Codezeilen handelt.

OregonJeff

0

Schnelle / einfache Lösung:

Verwenden Sie JQuery .toggle () , um die Zeilen beim Klicken auf eine Zeile oder einen Anker anzuzeigen / auszublenden.

Es muss eine Funktion geschrieben werden, um die Zeilen zu identifizieren, die ausgeblendet werden sollen. Durch Umschalten wird jedoch die gewünschte Funktionalität erstellt.

Daniel Adams
quelle

Ich denke, dass dies bereits in dieser Antwort vorgeschlagen wurde ...

DarkCygnus

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

Antworten:

So schieben Sie die Zeile herunter :

So schieben Sie die Zeile hoch :