HTMLTableCellElement.cellIndex — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableCellElement.cellIndex

Beschreibung

Die Eigenschaft cellIndex gibt an, an welcher Stelle eine Tabellenzelle in der cells-Sammlung ihrer übergeordneten Zeile (HTMLTableRowElement.cells) steht. Gezählt wird ab 0. Dabei zählen <td> und <th> gleich.

Sie brauchen cellIndex vor allem bei Tabellen, mit denen der Nutzer interagiert. Ein paar Beispiele:

Beim Klick auf eine Zelle herausfinden, zu welcher Spalte sie gehört (z. B. zum Sortieren oder Hervorheben).
Die passende Kopfzelle (<th>) zu einer Datenzelle bestimmen.
Mit der Tastatur zwischen Zellen wechseln, zusammen mit HTMLTableRowElement.rowIndex.

Wichtig: cellIndex ist die logische Position in der DOM-Sammlung row.cells und nicht die sichtbare Spalte. Zellen mit colspan oder rowspan werden nicht eingerechnet. Gehört die Zelle zu keiner Zeile, ist der Wert -1.

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl ab 0: die Position der Zelle in row.cells. Ist die Zelle keiner <tr> zugeordnet, ist der Wert -1.

Beispiele

Spalte einer angeklickten Zelle ermitteln

// HTML: <table id="preise"><thead><tr><th>Produkt</th><th>Preis</th><th>Lager</th></tr></thead>
// <tbody><tr><td>Maus</td><td>19,90 €</td><td>42</td></tr></tbody></table>
const table = document.querySelector('#preise');

table.addEventListener('click', (event) => {
  const cell = event.target.closest('td, th');
  if (!cell || !table.contains(cell)) return;

  const header = table.tHead.rows[0].cells[cell.cellIndex];
  console.log(`Spalte ${cell.cellIndex}: ${header.textContent} = ${cell.textContent}`);
});

Spalte 1: Preis = 19,90 €

Ganze Spalte beim Hovern hervorheben

const table = document.querySelector('table');

const toggleColumn = (index, on) => {
  for (const row of table.rows) {
    row.cells[index]?.classList.toggle('spalte-aktiv', on);
  }
};

table.addEventListener('mouseover', (e) => {
  const cell = e.target.closest('td, th');
  if (cell) toggleColumn(cell.cellIndex, true);
});

table.addEventListener('mouseout', (e) => {
  const cell = e.target.closest('td, th');
  if (cell) toggleColumn(cell.cellIndex, false);
});

Wert -1 und Verhalten bei colspan

// Zelle außerhalb einer Zeile
const lose = document.createElement('td');
console.log(lose.cellIndex);

// Zeile mit colspan
const row = document.createElement('tr');
row.innerHTML = '<td colspan="2">A+B</td><td>C</td>';
console.log(row.cells[1].cellIndex); // sichtbar ist das die 3. Spalte

-1 1

Tastaturnavigation mit rowIndex und cellIndex

const table = document.querySelector('table');

table.addEventListener('keydown', (e) => {
  const cell = e.target.closest('td');
  if (!cell) return;

  const { rowIndex } = cell.parentElement;
  const col = cell.cellIndex;
  const moves = { ArrowRight: [0, 1], ArrowLeft: [0, -1], ArrowDown: [1, 0], ArrowUp: [-1, 0] };
  const move = moves[e.key];
  if (!move) return;

  const target = table.rows[rowIndex + move[0]]?.cells[col + move[1]];
  if (target) {
    e.preventDefault();
    target.focus(); // Zellen brauchen tabindex="-1" oder "0"
  }
});

// Wichtig · Fallstricke

colspan und rowspan werden nicht berücksichtigt: cellIndex zählt nur Elemente in row.cells. Die sichtbare Spalte kann deshalb abweichen. Bei verbundenen Zellen müssen Sie die Spalte selbst berechnen, indem Sie die colSpan-Werte der vorherigen Zellen (und die rowspan-Werte der Zeilen darüber) aufaddieren.
Nur lesbar: Wenn Sie etwas zuweisen, passiert nichts. Im strikten Modus wird ein TypeError ausgelöst. Um Zellen zu verschieben, nutzen Sie DOM-Methoden wie insertBefore() oder HTMLTableRowElement.insertCell().
-1 als Sonderwert: Zellen, die mit createElement('td') erzeugt wurden und noch nicht in einer <tr> hängen, liefern -1. Prüfen Sie diesen Wert, bevor Sie ihn als Index verwenden.
Nicht zu verwechseln mit rowIndex: rowIndex gehört zu HTMLTableRowElement und zählt über die ganze Tabelle, einschließlich thead, tbody und tfoot.
Wird in allen gängigen Browsern seit Langem unterstützt, auch in alten Versionen des Internet Explorer.

Siehe auch

HTMLSelectElement.required HTMLTableCellElement.align HTMLTableCellElement.colSpan HTMLTableCellElement.headers HTMLTableCellElement.vAlign