DE
RU
EN
ES
ZH
FR
PT
AR
HI
So fügen Sie mit jQuery eine Zeile zu einer Tabelle hinzu: Der vollständige Leitfaden
Die Arbeit mit HTML-Tabellen ist eine der häufigsten Aufgaben für Frontend-Entwickler. Und das dynamische Hinzufügen neuer Zeilen zu einer Tabelle ist ein absoluter Klassiker. Stellen Sie sich vor: Sie erstellen einen Online-Shop, ein Admin-Panel für einen Blog oder ein Aufgabenverwaltungssystem. Fast immer muss der Benutzer auf eine Schaltfläche "Hinzufügen" klicken können – und in der Tabelle erscheint ein neuer Eintrag.
Heute werden wir im Detail besprechen, wie man eine Tabellenzeile in jQuery hinzufügt. Dies ist keine trockene Theorie, sondern ein praktisches, schrittweises Tutorial mit lebendigen Codebeispielen. Sie lernen die gängigsten Methoden, Fallstricke und Best Practices kennen. Los geht's!
Warum jQuery und nicht reines JavaScript?
Eine berechtigte Frage. Ja, natives JavaScript kann schon lange mit dem DOM arbeiten, und die Methode document.createElement wurde nicht abgeschafft. Aber jQuery lehrt das Hinzufügen einer Tabellenzeile schneller und einfacher, besonders wenn Sie Anfänger sind. jQuery übernimmt die Cross-Browser-Kompatibilität und bietet eine elegante Syntax. Außerdem sind Millionen von Codezeilen in der Produktion in jQuery geschrieben – und müssen gewartet werden. Daher ist die Kenntnis dieser Techniken eine unverzichtbare Fähigkeit für Webentwickler.
Basis-HTML für unsere Experimente
Zunächst benötigen wir eine einfache Tabelle. Hier ist ihr Markup – kopieren Sie es in Ihre HTML-Datei oder in eine Sandbox wie CodePen.
<!DOCTYPE html><html lang="de"><head> <meta charset="UTF-8"> <title>Tabellenzeile in jQuery hinzufügen</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script></head><body>
<h2>Mitarbeiterliste</h2><table id="employees" border="1"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Gehalt</th> </tr> </thead> <tbody> <tr> <td>Anna</td> <td>Entwickler</td> <td>150.000 ₽</td> </tr> <tr> <td>Ivan</td> <td>Designer</td> <td>120.000 ₽</td> </tr> </tbody></table>
<button id="addRow">Zeile hinzufügen</button>
<script>// Hier kommt unser jQuery-Code</script>
</body></html>Beachten Sie: Die Tabelle hat einen thead (Kopf) und einen tbody (Körper). Dies ist eine korrekte semantische Struktur. Das Hinzufügen einer Zeile in eine jQuery-Tabelle werden wir genau in den tbody vornehmen, nicht in die Tabelle selbst – so beschädigen wir die Kopfzeilen nicht.
Methode Nr. 1: jQuery append – der Klassiker
Die beliebteste Methode ist die Verwendung von .append(). Sie fügt Inhalt am Ende des ausgewählten Elements hinzu. In unserem Fall am Ende des tbody.
Angenommen, wir möchten einen neuen Mitarbeiter hinzufügen. Der Code sieht so aus:
$('#addRow').on('click', function() { var newRow = '<tr>' + '<td>Peter</td>' + '<td>Manager</td>' + '<td>100.000 ₽</td>' + '</tr>'; $('#employees tbody').append(newRow);});Alles ist genial einfach: Wir bauen einen HTML-String mit der neuen Tabellenzeile zusammen und fügen ihn mit der Methode append ein, um eine Tabellenzeile in jQuery hinzuzufügen. Bei jedem Klick auf die Schaltfläche erscheint nun Peter, der Manager, in der Tabelle.
Wichtig: Wenn Sie kein tbody im Markup haben, könnte jQuery die Zeile direkt in die table einfügen, aber in diesem Fall könnte sie an der falschen Stelle landen. Verwenden Sie immer tbody!
Methode Nr. 2: prepend – Zeile am Anfang hinzufügen
Manchmal möchten Sie eine neue Zeile nicht am Ende, sondern am Anfang der Tabelle einfügen. Dafür gibt es die Methode .prepend(). Sie fügt Inhalt am Anfang des ausgewählten Elements hinzu.
Der Code ist fast identisch, nur dass wir append durch prepend ersetzen:
$('#addRowTop').on('click', function() { var newRow = '<tr>' + '<td>Maria</td>' + '<td>Analystin</td>' + '<td>130.000 ₽</td>' + '</tr>'; $('#employees tbody').prepend(newRow);});Jetzt wird die neue Zeile ganz oben in der Tabelle eingefügt, vor allen anderen Zeilen. Dies ist nützlich, wenn Sie die neuesten Einträge zuerst anzeigen möchten.
