Effizientes Hinzufügen von Tabellenzeilen mit jQuery und JavaScript

Das dynamische Hinzufügen von Zeilen zu HTML-Tabellen ist eine häufige Anforderung in der Webentwicklung, insbesondere beim Erstellen interaktiver Benutzeroberflächen. Dieses Tutorial zeigt effiziente Methoden, um dies sowohl mit jQuery als auch mit reinem JavaScript zu erreichen, sodass Sie den für Ihr Projekt am besten geeigneten Ansatz wählen können.

Inhaltsverzeichnis

• Hinzufügen von Tabellenzeilen mit JQuery’s append() und prepend()
• Hinzufügen von Tabellenzeilen mit reinem JavaScript

Hinzufügen von Tabellenzeilen mit JQuery’s append() und prepend()

jQuery bietet eine prägnante und effiziente Möglichkeit, das DOM zu manipulieren. Die Methoden append() und prepend() lassen sich nahtlos in Tabellenstrukturen integrieren.

Betrachten wir eine Beispiel-HTML-Tabelle:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Alter</th>
    <tr>
  </thead>
  <tbody>
    <!-- Zeilen werden hier hinzugefügt -->
  </tbody>
</table>

So fügen Sie mit jQuery eine neue Zeile hinzu:

// Den Tabellenkörper erhalten
let $tableBody = $('#myTable tbody');

// Die neue Zeile erstellen
let $newRow = $('<tr>');

// Zellen erstellen und anhängen
$newRow.append('<td>Neuer Name</td>');
$newRow.append('<td>30</td>');

// Die Zeile an den Tabellenkörper anhängen
$tableBody.append($newRow); 

Dieser Codeausschnitt wählt den Tabellenkörper aus, erstellt ein neues Zeilenelement, fügt Datenzellen hinzu und hängt die vollständige Zeile an die Tabelle an. Zum Voranstellen (Hinzufügen am Anfang) verwenden Sie einfach $tableBody.prepend($newRow);.

Für komplexere Szenarien oder das Hinzufügen mehrerer Zeilen kann das direkte Erstellen des Zeilen-HTML-Strings effizienter sein:

let newRowHTML = `<tr><td>Ein weiterer Name</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

Denken Sie daran, vom Benutzer bereitgestellte Daten zu bereinigen, um XSS-Schwachstellen zu vermeiden.

Hinzufügen von Tabellenzeilen mit reinem JavaScript

Das Verständnis des nativen JavaScript-Ansatzes bietet ein tieferes Verständnis der DOM-Manipulation. Obwohl ausführlicher, vermeidet es externe Abhängigkeiten.

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = 'Noch ein weiterer Name';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

Dieser Code manipuliert das DOM direkt mit Standard-JavaScript-Methoden. Wählen Sie die Methode, die am besten zu den Anforderungen Ihres Projekts und Ihren Kenntnissen von jQuery passt. Denken Sie daran, die jQuery-Bibliothek einzubinden, wenn Sie die jQuery-Beispiele verwenden: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>