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> 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, 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(), 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
insertRowChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3
Hinweise
Vollständige Unterstützung 3
Hinweise
Hinweise Starting with Firefox 20, the index argument has been made optional and defaults to -1 as per HTML specification.
IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung 10Safari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Starting with Firefox 20, the index argument has been made optional and defaults to -1 as per HTML specification.
Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 3.2Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

See also