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 Juli 2015.
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 einen bestimmten Abschnitt einzufügen, verwenden Sie HTMLTableSectionElement.insertRow().
Hinweis:
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
<tr>-Element zu erstellen.
Syntax
insertRow()
insertRow(index)
HTMLTableElement ist eine Referenz auf ein HTML <table>
Element.
Parameter
indexOptional-
Der Zeilenindex der neuen Zeile. Wenn
index-1oder gleich der Anzahl der Zeilen ist, wird die Zeile als letzte Zeile angehängt. Wirdindexweggelassen, ist der Standardwert-1.
Rückgabewert
Ein HTMLTableRowElement, das auf die neue
Zeile verweist.
Ausnahmen
IndexSizeErrorDOMException-
Wird ausgelöst, wenn
indexgröß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> mindestens ein
<td>-Element haben.) Schließlich fügen wir der Zelle etwas Text hinzu, indem wir
Document.createTextNode() und Node.appendChild() verwenden.
HTML
<table id="my-table">
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
</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
| Specification |
|---|
| HTML # dom-table-insertrow-dev |