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 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.
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. Wennindexweggelassen wird, 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>-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
| Specification |
|---|
| HTML # dom-table-insertrow-dev |
Browser-Kompatibilität
Loading…