HTMLTableCellElement: свойство headers

Базовая линия Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство headers интерфейса HTMLTableCellElement содержит список идентификаторов элементов <th>, которые являются заголовками для этой ячейки.

Значение

Строка, содержащая разделенные пробелами идентификаторы.

Примеры

В этом примере отображается идентификатор последней нажатой ячейки таблицы:

HTML

<table>
  <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>
  <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>
</table>
IDs of headers of the last clicked cell: <output>none</output>.

JavaScript

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

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

Результат

Спецификации

Спецификация
HTML # dom-tdth-headers

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`headers`	1	12	1	≤12.1	3	18	4	≤12.1	1	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement/headers