Signatur
Beschreibung
Die Methode deleteCell() der Schnittstelle HTMLTableRowElement entfernt eine einzelne Zelle aus einer Tabellenzeile. Welche Zelle entfernt wird, legt der Index fest. Er bezieht sich auf die Sammlung row.cells. Darin stehen sowohl <td>- als auch <th>-Elemente, und zwar in der Reihenfolge, in der sie im Dokument stehen.
Mit dem Sonderwert -1 wird die letzte Zelle der Zeile entfernt. Hat die Zeile keine Zellen, passiert bei -1 nichts und es wird kein Fehler ausgelöst. Das ist praktisch, wenn man in einer Schleife von hinten nach vorn Zellen entfernt, etwa um eine ganze Spalte aus einer Tabelle zu löschen.
Man nutzt deleteCell() vor allem bei dynamischen Tabellen: Spalten ein- und ausblenden, per Skript erzeugte Datenzellen wieder entfernen oder Tabellen umbauen. Das Gegenstück ist HTMLTableRowElement.insertCell(). Wer eine ganze Zeile entfernen will, verwendet HTMLTableElement.deleteRow() bzw. HTMLTableSectionElement.deleteRow().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $index Pflicht | number | Position der zu entfernenden Zelle in row.cells, bei 0 beginnend. -1 steht für die letzte Zelle. |
Rückgabewert
undefined). Die entfernte Zelle wird nicht zurückgegeben. Wenn du sie noch brauchst, hol sie dir vorher über row.cells[index].Beispiele
Erste und letzte Zelle einer Zeile entfernen
// <table><tr id="zeile"><td>A</td><td>B</td><td>C</td><td>D</td></tr></table>
const row = document.getElementById('zeile');
row.deleteCell(0); // entfernt "A"
row.deleteCell(-1); // entfernt die letzte Zelle "D"
console.log([...row.cells].map((c) => c.textContent));Eine ganze Spalte aus einer Tabelle löschen
// Entfernt die Spalte mit dem gegebenen Index aus allen Zeilen (thead, tbody, tfoot)
const deleteColumn = (table, colIndex) => {
for (const row of table.rows) {
if (colIndex < row.cells.length) {
row.deleteCell(colIndex);
}
}
};
const table = document.querySelector('#preise');
deleteColumn(table, 2); // dritte Spalte entfernen
console.log(table.rows[0].cells.length);Alle Zellen einer Zeile leeren und die Zeile neu befüllen
const row = document.querySelector('#status-zeile');
// -1 löst bei einer leeren Zeile keinen Fehler aus, darum ist die Schleife sicher
while (row.cells.length > 0) {
row.deleteCell(-1);
}
['OK', '200 ms', new Date().toLocaleTimeString('de-DE')].forEach((text) => {
row.insertCell().textContent = text;
});
console.log(row.cells.length);Fehlerbehandlung bei ungültigem Index
const row = document.createElement('tr');
row.insertCell().textContent = 'einzige Zelle';
try {
row.deleteCell(5);
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- Ungültiger Index: Ist
indexgrößer oder gleich der Zahl der Zellen oder kleiner als-1, wird eineDOMExceptionvom TypIndexSizeErrorausgelöst. Eine Ausnahme ist-1bei einer leeren Zeile: Dann passiert einfach nichts. - Index-Verschiebung:
row.cellsist eine liveHTMLCollection. Nach jedem Löschen rücken die folgenden Zellen um eine Position nach vorn. Wenn du mehrere Zellen per Index entfernst, geh deshalb von hinten nach vorn vor. colspan/rowspan: Der Index zählt DOM-Zellen, keine sichtbaren Spalten. Wenn eine Tabelle verbundene Zellen enthält, passt die Position incellsnicht mehr zur sichtbaren Spalte. Ein naives Löschen einer Spalte bringt das Layout dann durcheinander.- Das Argument
indexist laut Spezifikation Pflicht. Ältere Browser haben ein fehlendes Argument teils anders behandelt, gib es also immer an. - Alternativ kannst du eine Zelle auch mit
cell.remove()entfernen. Das ist nützlich, wenn du schon eine Referenz auf das Element hast. - Kompatibilität: Die Methode gehört zu DOM Level 2 HTML und wird von allen Browsern unterstützt.