DieinsertRow() Methode desHTMLTableElement Interfaces fügt eine neue Zeile(<tr>) in eine gegebene<table> ein und gibt eine Referenz auf dieneue Zeile zurück.

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

Syntax

insertRow()insertRow(index)

HTMLTableElement ist eine Referenz auf ein HTML<table>Element.

Parameter

indexOptional

Der Zeilenindex der neuen Zeile. Wennindex-1 oder gleichder Anzahl der Zeilen ist, wird die Zeile als letzte Zeile angehängt.Wirdindex weggelassen, ist der Standardwert-1.

Rückgabewert

EinHTMLTableRowElement, das auf die neueZeile verweist.

Ausnahmen

IndexSizeErrorDOMException

Wird ausgelöst, wennindex größer als die Anzahl der Zeilen ist.

Beispiele

Dieses Beispiel verwendetinsertRow(-1), um eine neue Zeile an eine Tabelle anzuhängen.

Wir verwenden dannHTMLTableRowElement.insertCell(), um eine neue Zelle in derneuen 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 wirDocument.createTextNode() undNode.appendChild() verwenden.

HTML

<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 IDaddRow("my-table");

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

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