HTMLTableCellElement: headers-Eigenschaft

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 headers-Eigenschaft des HTMLTableCellElement-Interfaces enthält eine Liste von IDs von <th>-Elementen, die Header für diese spezifische Zelle sind.

In diesem Artikel

Wert

Ein String, der Leerzeichen-getrennte IDs enthält.

Beispiele

Dieses Beispiel listet die ID der zuletzt angeklickten Zelle der Tabelle auf:

HTML

html
<table>
  <thead>
    <tr>
      <th rowspan="2" id="h">Homework (ID = h)</th>
      <th colspan="3" id="e">Exams (ID = e)</th>
      <th colspan="3" id="p">Projects (ID = p)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="e1" headers="e">1 (ID = e1)</th>
      <th id="e2" headers="e">2 (ID = e2)</th>
      <th id="ef" headers="e">Final (ID = ef)</th>
      <th id="p1" headers="p">1 (ID = p1)</th>
      <th id="p2" headers="p">2 (ID = p2)</th>
      <th id="pf" headers="p">Final (ID = pf)</th>
    </tr>
    <tr>
      <td headers="h">15%</td>
      <td headers="e e1">15%</td>
      <td headers="e e2">15%</td>
      <td headers="e ef">20%</td>
      <td headers="p p1">10%</td>
      <td headers="p p2">10%</td>
      <td headers="p pf">15%</td>
    </tr>
  </tbody>
</table>
IDs of headers of the last clicked cell: <output>none</output>.

table {
  border-collapse: collapse;
}

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

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

JavaScript

js
const table = document.querySelector("table");
const output = document.querySelector("output");

table.addEventListener("click", (ev) => {
  output.textContent = ev.target.headers ? ev.target.headers : "none";
});

Ergebnis

Spezifikationen

Spezifikation

HTML
# dom-tdth-headers

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

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

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLTableCellElement
Instanzeigenschaften
1. abbr
2. align
3. bgColor
4. cellIndex
5. ch
6. chOff
7. colSpan
8. headers
9. noWrap
10. rowSpan
11. scope
12. vAlign
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung