HTMLTableRowElement: insertCell() 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 insertCell() Methode der HTMLTableRowElement Schnittstelle fügt eine neue Zelle (<td>) in eine Tabellenzeile (<tr>) ein und gibt eine Referenz auf die Zelle zurück.

Note: insertCell() fügt die Zelle direkt in die Zeile ein. Die Zelle muss nicht separat mit Node.appendChild() angehängt werden, wie es der Fall wäre, wenn Document.createElement() verwendet worden wäre, um das neue <td> Element zu erstellen.

Sie können insertCell() jedoch nicht verwenden, um ein neues <th> Element zu erstellen.

Syntax

js
insertCell()
insertCell(index)

Parameter

index Optional

Der Zellindex der neuen Zelle. Wenn index -1 oder gleich der Anzahl der Zellen ist, wird die Zelle als letzte Zelle in der Zeile angehängt. Wenn index weggelassen wird, ist der Standardwert -1.

Rückgabewert

Ein HTMLTableCellElement, das auf die neue Zelle verweist.

Ausnahmen

IndexSizeError DOMException

Wird ausgelöst, wenn index größer als die Anzahl der Zellen ist.

Beispiele

Dieses Beispiel verwendet HTMLTableRowElement.insertCell(), um eine neue Zelle an eine Zeile anzuhängen.

HTML

html
<table>
  <thead>
    <tr>
      <th>C1</th>
      <th>C2</th>
      <th>C3</th>
      <th>C4</th>
      <th>C5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

<button id="add">Add a cell</button>
<button id="remove">Remove last cell</button>
<div>This first row has <output>2</output> cell(s).</div>

JavaScript

js
// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const row = bodySection.rows[0]; // Select the first row of the body section
const cells = row.cells; // The collection is live, therefore always up-to-date
const cellNumberDisplay = document.querySelectorAll("output")[0];

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

function updateCellNumber() {
  cellNumberDisplay.textContent = cells.length;
}

addButton.addEventListener("click", () => {
  // Add a new cell at the end of the first row
  const newCell = row.insertCell();
  newCell.textContent = `Cell ${cells.length}`;

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

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

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

Ergebnis

Spezifikationen

Specification
HTML Standard
# dom-tr-insertcell-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch