Baseline Widely available
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()
.
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.
insertRow()
insertRow(index)
HTMLTableElement
ist eine Referenz auf ein HTML <table>
-Element.
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
.
Ein HTMLTableRowElement
, das auf die neue Zeile verweist.
IndexSizeError
DOMException
Wird ausgelöst, wenn index
gröÃer als die Anzahl der Zeilen ist.
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.
<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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4