HTMLTableSectionElement: 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 July 2015.

Die insertRow()-Methode der HTMLTableSectionElement-Schnittstelle fügt eine neue Zeile (<tr>) in das angegebene Tabellensektionselement (<thead>, <tfoot> oder <tbody>) ein und gibt dann eine Referenz auf diese neue Zeile zurück.

Note: insertRow() fügt die Zeile direkt in die Sektion ein. Die Zeile muss nicht separat angehängt werden, wie es der Fall wäre, wenn Document.createElement() verwendet wurde, um das neue <tr>-Element zu erstellen.

Syntax

js
insertRow()
insertRow(index)

Parameter

index Optional

Der Zeilenindex der neuen Zeile. Wenn index -1 ist oder gleich der Anzahl der Zeilen, wird die Zeile als letzte Zeile angehängt. Wenn index weggelassen wird, ist der Standardwert -1.

Rückgabewert

Ein HTMLTableRowElement, das die neue Zeile referenziert.

Ausnahmen

IndexSizeError DOMException

Wird ausgelöst, wenn index größer als die Anzahl der Zeilen oder kleiner als -1 ist.

Beispiele

In diesem Beispiel ermöglichen zwei Schaltflächen das Hinzufügen und Entfernen von Zeilen aus dem Tabellenkörperabschnitt; es wird auch ein <output>-Element mit der aktuellen Anzahl der Zeilen in der Tabelle aktualisiert.

HTML

html
<table>
  <thead>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </thead>
  <tbody>
    <tr>
      <td>X</td>
      <td>Y</td>
      <td>Z</td>
    </tr>
  </tbody>
</table>
<button id="add">Add a row</button>
<button id="remove">Remove last row</button>
<div>This table's body has <output>1</output> row(s).</div>

JavaScript

js
// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // The collection is live, therefore always up-to-date
const rowNumberDisplay = document.querySelectorAll("output")[0];

const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");

function updateRowNumber() {
  rowNumberDisplay.textContent = rows.length;
}

addButton.addEventListener("click", () => {
  // Add a new row at the end of the body
  const newRow = bodySection.insertRow();

  // Add cells inside the new row
  ["A", "B", "C"].forEach(
    (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
  );

  // Update the row counter
  updateRowNumber();
});

removeButton.addEventListener("click", () => {
  // Delete the row from the body
  bodySection.deleteRow(-1);

  // Update the row counter
  updateRowNumber();
});

Ergebnis

Spezifikationen

Specification
HTML
# dom-tbody-insertrow

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertRow

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch