HTMLTableElement.insertRow()

Die Methode HTMLTableElement.insertRow() fügt einer vorhandenen <table> eine neue Zeile (<tr>) hinzu und gibt eine Referenz auf die neue Zeile zurück.

Wenn eine Tabelle mehrere <tbody> (en-US) Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <tbody> hinzugefügt. Um sie einem bestimmten <tbody> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <tbody> Element und rufen Sie insertRow() auf diesem Element auf:

let bestimmter_tbody = document.getElementById(tbody_id);
let zeile = bestimmter_tbody.insertRow(index)

Anmerkung: insertRow() fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <tr> Element mittels Document.createElement() erzeugt hätte.

Syntax

var neueZeile = HTMLTableElement.insertRow(index);

HTMLTableElement ist eine Referenz auf ein HTML <table> Element.

Parameters

index Optional
Der Zeilenindex der neuen Zeile. Ist der Index -1 or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn index größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer IndexSizeError Exception. Wird index weggelassen, ist der Standardwert -1.

Rückgabewert

neueZeile ist ein HTMLTableRowElement (en-US), das die neue Zeile referenziert.

Beispiel

Dieses Beispiel verwendet insertRow(-1), um an eine Tabelle eine neue Zeile anzufügen.

Wir verwenden daraufhin HTMLTableRowElement.insertCell() (en-US), um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <tr> mindestens ein <td> Element enthalten.) Schließlich fügen wir der Zelle mittels Document.createTextNode() und Node.appendChild() Text hinzu.

HTML

<table id="my-table">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

JavaScript

function addRow(tableID) {
  // Beschaffe eine Referenz auf die Tabelle
  let tableRef = document.getElementById(tableID);

  // Füge am Ende der Tabelle eine neue Zeile an
  let newRow = tableRef.insertRow(-1);

  // Erstelle in der Zeile eine Zelle am Index 0
  let newCell = newRow.insertCell(0);

  // Füge der Zelle einen textnode hinzu
  let newText = document.createTextNode('Neue letzte Zeile');
  newCell.appendChild(newText);
}

// Rufe addRow() mit der ID der Tabelle auf
addRow('my-table');

Result

Spezifikationen

Specification Status Comment
HTML Living Standard
Die Definition von 'HTMLTableElement.insertRow()' in dieser Spezifikation.
Lebender Standard
Document Object Model (DOM) Level 2 HTML Specification
Die Definition von 'HTMLTableElement.insertRow()' in dieser Spezifikation.
Veraltet Spezifiziert genauer, wo die Zeile eingefügt wird.
Document Object Model (DOM) Level 1 Specification
Die Definition von 'HTMLTableElement.insertRow()' in dieser Spezifikation.
Veraltet Initiale Definition

Browser compatibility

BCD tables only load in the browser

See also