Wie kann man Tabellenzeilen mit jQuery dynamisch erweitern und reduzieren?

Tabellenzeilen dynamisch mit jQuery erweitern und reduzieren

Problem:

Tabelle wird erweitert oder reduziert Zeilen, wenn auf eine bestimmte Spaltenüberschrift geklickt wird, stellt eine Herausforderung dar. Um diese Aufgabe zu vereinfachen, kann eine benutzerdefinierte CSS-Klasse verwendet werden, um Zeilen in jedem Header zu unterscheiden. Allerdings kann die Verwaltung mehrerer CSS-Klassen für mehrere Header umständlich werden.

Lösung:

Um die Komplexität der Verfolgung mehrerer CSS-Klassen zu vermeiden, nutzt ein alternativer Ansatz das nextUntil( )-Methode in jQuery. Diese Methode ruft alle Zeilen ab, die auf die angeklickte Kopfzeile folgen, bis die nächste Kopfzeile gefunden wird.

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>

Beispiel:

In diesem Beispiel wird der Kopfzeile eine Klasse „header“ zugewiesen. Wenn auf eine Kopfzeile geklickt wird, werden die Zeilen direkt darunter mithilfe der slideToggle()-Methode zwischen ausgeblendet und sichtbar umgeschaltet.

Zusätzliche Funktionen:

• Sie können ein span-Element in der Kopfzeile verwenden, um ein „ “ oder „-“-Zeichen anzuzeigen, das umschaltet, nachdem die Zeile erweitert oder reduziert wurde:

<code class="javascript">$('.header').click(function(){
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

• Um den Bereich umzuschalten Symbol/Text asynchron nach Abschluss des Umschaltens verwenden Sie die Promise() der slideToggle()-Methode:

<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
    $this.find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
});</code>

• Alternativ können Sie ein CSS-Pseudoelement verwenden, um die Erweiterung/Reduzierung darzustellen Unterzeichnen Sie eine Klasse und schalten Sie sie in der Kopfzeile um:

<code class="css">.header .sign:after{
    content:"+";
    display:inline-block;      
}
.header.expand .sign:after{
    content:"-";
}</code>

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

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