HTMLTableCellElement: cellIndex-Eigenschaft - Web-APIs

HTMLTableCellElement: cellIndex-Eigenschaft - Web-APIs | MDN

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 cellIndex schreibgeschützte Eigenschaft des HTMLTableCellElement Schnittstelle repräsentiert die Position einer Zelle innerhalb ihrer Zeile (<tr>). Die erste Zelle hat einen Index von 0.

Wert

Gibt den Index der Zelle zurück oder -1, wenn die Zelle nicht Teil einer Zeile ist.

Beispiele

Dieses Beispiel fügt allen Zellnummern der ersten Zeile des tbody ein Label hinzu.

HTML

html

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>Rice</td>
      <td>$2.5</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

const rows = document.querySelectorAll("tbody tr");
const cells = rows[0].cells;

for (const cell of cells) {
  cell.textContent = `${cell.textContent} (cell #${cell.cellIndex})`;
}

Ergebnis

Spezifikationen

Spezifikation
HTML # dom-tdth-cellindex

Browser-Kompatibilität

Help improve MDN

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