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 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.

In diesem Artikel

Syntax

js
insertRow()
insertRow(index)

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

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

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

js
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");

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLTableElement
Instanzeigenschaften
Instanzmethoden
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLTableElement: insertRow() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Ausnahmen

Beispiele

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN