Erweitern und Reduzieren der Tabellenzeile (tr) mit jquery

Hier ist der Code zum Umschalten der Tabellenzeilen, die "inaktiv" sind. Es ist besser, sich auf "engste ()" als "parent ()" oder "eltern ()" zu verlassen, weil es schneller ist und es in diesem Fall sinnvoller ist, es zu verwenden.

Zunächst behandelt Jquery Höhenanimationen bei Tabellenelementen nicht richtig. Also werden wir <div> innerhalb der <td> einfügen, um animiert zu werden, wie in diesem Antwort .

Zweitens, da Sie die inaktiven Elemente als Gruppe umschalten möchten, sollten wir sie zusammen gruppieren.

• Wir finden die inaktiven Zeilen mit der Methode has() und umhüllen sie in einer <tfoot> mit wrapAll() und fügen Sie es vor dem <tbody> ein, für die wir insertBefore() verwenden.

  ^{Ich benutze insertBefore() , da es aufgrund des in diesem Antwort . Wir können insertAfter() auch verwenden, da es semantisch akzeptabel ist, die <tfoot> nach der <tbody> einzufügen,}

• Dann finden wir die <td> in ihnen und wickeln ihren Inhalt mit <div> ein="http://api.jquery.com/wrapinner"> wrapInner() Methode.

  ^{Sie können diesen Schritt vermeiden, indem Sie die Tabelle in serverseitig}

  entsprechend auffüllen

• Wir fügen dann die Option zum Umschalten vor der erste inaktive Zeile.

• Wenn Sie auf die Umschaltoption klicken, verwenden wir closest() , um auf das übergeordnete Element <tr> und dann auf nextAll() zuzugreifen, um auf alle folgenden% co_de zu verweisen % - welche sind inaktiv. Wir finden dann die <tr> , die wir in sie injiziert haben und rufen <div für die Umschaltfunktion auf.

  ^{Wir können slideToggle() auch für den Zugriff auf das übergeordnete Element parent() entsprechend dem aktuellen Markup verwenden. Ich benutze am nächsten, damit es funktioniert, wenn Sie den Event-Handler an ein Element in <tr> binden - sagen wir zum Beispiel eine Schaltfläche.}

  ^{Wir können <td> auch für den Zugriff auf die folgenden siblings() verwenden, da wir die aktive und inaktive Zeilen in verschiedene Container.}

  ^{Beachten Sie, dass wir den Event-Handler delegieren müssen, indem Sie <tr> seither Wir injizieren die Umschaltoption dynamisch.}

• Schließlich verwenden wir das CSS-Pseudoelement on() um das anzuzeigen entsprechendes Symbol basierend auf einer Klasse, die beim Benutzer umgeschaltet wird klickt die Umschaltoption mit ::before

Anders als diese,

• Ich habe die Titelspalten in toggleClass() eingeschlossen, was mehr ist semantisch angemessen.
• Ich habe eine Mindestbreite für <thead> festgelegt, um den "Ruck" aufgrund der Änderung der Breite der Spalte <td> zu vermeiden, wenn die Sichtbarkeit aller State Elemente umgeschaltet wird
• Ich habe die leere Inactive entfernt und ein paar CSS hinzugefügt, um eine Demo zu erstellen

Wir enden mit der folgenden semantisch coolen Struktur, die reduzierbar ist:

Sie hatten ein paar Probleme mit Ihren Selektoren:

Dies sollte so funktionieren, wie Sie es beabsichtigt haben.

Was die Animation des slideToggle anbelangt, haben Tabellen leider einen eingeschränkten Stil. In diesem Fall wird das SlideToggle aufgrund der Zeilenhöhe der tr -Elemente nicht animiert. Sie könnten die Eigenschaften tr line-height und height manuell in der CSS-Datei festlegen, was jedoch in Zukunft zu weiteren Formatierungsfehlern führen kann. Hier ist ein Beispiel Geige .

Wie in einem früheren Post erwähnt, müssen Sie die% style-Eigenschaften line-height und height des Tags tr festlegen, damit die Animationseffekte funktionieren.

Hier ist ein Beispiel, das alle 'InActive' Zeilen mit einem Knopf umschaltet.

CSS:

HTML:

JS:

Eine einfache Lösung dafür wäre, die Daten so zu binden, dass zuerst die aktiven und dann die inaktiven Daten angezeigt werden (verwenden Sie die gleiche Sortierung).

Wenn das nicht möglich ist, dann können Sie wahrscheinlich den folgenden Code verwenden, um sie zu sortieren (FYI das würde nur für die Elemente funktionieren, die bereits im DOM vorhanden sind und nur einmal ausgeführt werden sollten)

Fügen Sie dann das Symbol zum Zusammenfalten und Expandieren von Ausgeblendeten hinzu

Fügen Sie zuletzt den Klick hinzu, auch für das dynamische Symbol, das wie folgt hinzugefügt wurde:

Hoffe das hilft:)

Wie TJ in seiner Antwort sagte , ist es kompliziert, die Höhe einer Tabellenzeile zu animieren (siehe diese Antwort oder diese Antwort für Hacks um ihn herum, bei denen der Inhalt jeder Zelle in <div> ) eingeschlossen wird.

Sie könnten die Animation komplett überspringen und einfach die inaktiven Zeilen ausblenden oder anzeigen:

Wenn Sie eine visuelle Süßigkeit wünschen, die dem Benutzer das Verbergen signalisiert, würde ich vorschlagen, .fadeToggle() zu verwenden, was sofort funktioniert:

Geige

Als zusätzliche Anmerkung: Wenn Sie den Code ändern können, der die Tabelle generiert (zB PHP oder Ruby (oder Wathever)), versuchen Sie, die Klasse active / inactive auf die Zeile zu setzen ( der Knoten <tr> ) und nicht die innere Zelle (der Knoten <td> ):

Dies würde für einfachere Regeln in Ihrem CSS und JS sorgen:

Ich erstelle dies mit fadeToggle :

Aa Sie sehen, dass ich ein +/- a -Element hinzugefügt habe, um inaktive Zeilen anzuzeigen / auszublenden.