HTMLTableElement: insertRow()-Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die insertRow()-Methode des HTMLTableElement-Interfaces erstellt ein <tr>-Element, fügt es an der angegebenen Position in die rows-Sammlung ein und gibt es zurück. Wenn die rows-Sammlung leer ist und die Tabelle auch keine <tbody>-Elemente hat, wird zuerst ein <tbody>-Element erstellt und eingefügt.
Diese Methode erstellt und fügt das Element direkt ein, ohne separate Aufrufe von Methoden wie Document.createElement(), Node.insertBefore() und Node.appendChild() zu erfordern.
Um eine Zeile explizit in einen bestimmten Abschnitt einzufügen, verwenden Sie HTMLTableSectionElement.insertRow().
Syntax
insertRow()
insertRow(index)
Parameter
indexOptional-
Der Index der neuen Zeile in der
rows-Sammlung. Wennindex-1ist oder der Anzahl der Zeilen entspricht, wird die Zeile als letzte Zeile angefügt. Wennindexweggelassen wird, ist der Standardwert-1.Wenn
rowsleer ist, wird die neue Zeile an das letzte<tbody>-Element angehängt (es wird eines erstellt, wenn keines vorhanden ist). Andernfalls wird die neue Zeile unmittelbar vor der Zeile beiindexeingefügt oder beim übergeordneten Element der letzten Zeile angehängt, wenn die neue Zeile die letzte werden soll. Die neue Zeile wird in dasselbe übergeordnete Element wie die Referenzzeile eingefügt, sodass sie direkt in die<table>oder in ein beliebiges Tabellenabschnittselement (<thead>,<tbody>oder<tfoot>) eingefügt werden kann.
Rückgabewert
Ein HTMLTableRowElement, das sich auf die neue Zeile bezieht.
Ausnahmen
IndexSizeErrorDOMException-
Wird ausgelöst, wenn
indexgrößer ist als die Anzahl der Zeilen oder kleiner als-1.
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. 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
const tableRef = document.getElementById(tableID);
// Insert a row at the end of the table
const newRow = tableRef.insertRow(-1);
// Insert a cell in the row at index 0
const newCell = newRow.insertCell(0);
// Append a text node to the cell
const newText = document.createTextNode("New bottom row");
newCell.appendChild(newText);
}
// Call addRow() with the table's ID
addRow("my-table");
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-table-insertrow-dev |