Wie kann ich Tabellenzeilen mit jQuery erweitern und reduzieren?

Tabellenzeilen mit jQuery erweitern und reduzieren

Problem:

Tabellenzeilen erweitern und reduzieren Wenn auf eine bestimmte Kopfspalte geklickt wird, wird die Erweiterung/Reduzierung auf Zeilen unter der angeklickten Kopfzeile beschränkt.

Vorgeschlagene Lösung:

1. Identifizieren Sie die Kopfzeile Zeilen: Fügen Sie den Kopfzeilen eine Klasse wie „header“ hinzu.
2. Erweitern/Reduzieren umschalten: Verwenden Sie die .nextUntil()-Methode von jQuery, um alle Zeilen darunter auszuwählen Der angeklickte Header wird solange angezeigt, bis der nächste Header gefunden wird. Verwenden Sie dann .slideToggle(), um die Sichtbarkeit dieser Zeilen umzuschalten.

Code-Snippet:

<code class="javascript">$('.header').click(function() {
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

HTML-Struktur:

<code class="html"><table border="0">
  <tr class="header">
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

Zusätzliche Funktionen:

• Symbol zum Erweitern/Reduzieren: Verwenden Sie ein span-Element in den Kopfzellen, um eine anzuzeigen Symbol zum Erweitern oder Reduzieren. Aktualisieren Sie das Symbol basierend auf dem aktuellen Status.
• Promise-Verwendung: Verwenden Sie die .promise()-Methode von jQuery, um asynchrone Vorgänge wie Animationen zu verarbeiten.
• CSS Pseudoelement:Verwenden Sie ein CSS-Pseudoelement, um den Erweiterungs-/Reduzierungsindikator darzustellen und eine Klasse im Header umzuschalten, um die Sichtbarkeit zu steuern.

Das obige ist der detaillierte Inhalt vonWie kann ich Tabellenzeilen mit jQuery erweitern und reduzieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!