HTMLTableElement: insertRow()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die insertRow()-Methode des HTMLTableElement-Interfaces fügt eine neue Zeile () in eine angegebene

ein und gibt eine Referenz auf die neue Zeile zurück.

Wenn eine Tabelle mehrere

-Elemente hat, wird die neue Zeile standardmäßig in das letzte eingefügt. Um die Zeile in einen bestimmten Abschnitt einzufügen, verwenden Sie HTMLTableSectionElement.insertRow().

Note: insertRow() fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht separat angehängt werden, wie es der Fall wäre, wenn Document.createElement() verwendet worden wäre, um das neue

-Element zu erstellen.

Syntax

insertRow()
insertRow(index)

HTMLTableElement bezieht sich auf ein HTML-

-Element.

Parameter

index Optional: Der Zeilenindex der neuen Zeile. Wenn index -1 oder gleich der Anzahl der Zeilen ist, wird die Zeile als letzte Zeile angefügt. Wenn index weggelassen wird, ist der Standardwert -1.

Rückgabewert

Ein HTMLTableRowElement, das auf die neue Zeile verweist.

Ausnahmen

IndexSizeError DOMException: Wird ausgelöst, wenn index größer als die Anzahl der Zeilen ist.

Beispiele

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

Wir verwenden dann HTMLTableRowElement.insertCell(), um eine neue Zelle in der neuen Zeile einzufügen. (Um gültiges HTML zu sein, muss ein

-Element mindestens ein

-Element haben.) Schließlich fügen wir der Zelle mit Document.createTextNode() und Node.appendChild() Text hinzu.

HTML

html


  
    Row 1
  
  
    Row 2
  
  
    Row 3

JavaScript

function addRow(tableID) {
  // Get a reference to the table
  let tableRef = document.getElementById(tableID);

  // Insert a row at the end of the table
  let newRow = tableRef.insertRow(-1);

  // Insert a cell in the row at index 0
  let newCell = newRow.insertCell(0);

  // Append a text node to the cell
  let newText = document.createTextNode("New bottom row");
  newCell.appendChild(newText);
}

// Call addRow() with the table's ID
addRow("my-table");

Ergebnis

Spezifikationen

Specification
HTML # dom-table-insertrow-dev