HTMLTableElement: insertRow() Methode

Die insertRow() Methode des HTMLTableElement Interfaces fügt eine neue Zeile (<tr>) in eine gegebene <table> ein und gibt eine Referenz auf die neue Zeile zurück.

Wenn eine Tabelle mehrere <tbody>-Elemente hat, wird die neue Zeile standardmäßig in das letzte <tbody> eingefügt. Um die Zeile in einem bestimmten Abschnitt einzufügen, verwenden Sie HTMLTableSectionElement.insertRow().

Syntax

insertRow()
insertRow(index)

HTMLTableElement ist eine Referenz auf ein HTML <table>-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 angehängt. 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 an eine Tabelle anzuhängen.

Wir verwenden dann HTMLTableRowElement.insertCell(), um eine neue Zelle in der neuen Zeile einzufügen. (Um gültiges HTML zu sein, muss ein <tr>-Element mindestens ein <td>-Element haben.) Schließlich fügen wir der Zelle text mit Document.createTextNode() und Node.appendChild() 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) {
 // 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

Browser-Kompatibilität

Siehe auch

• HTMLTableRowElement.insertCell()
• HTMLTableSectionElement.insertRow()