HTMLTableCellElement: headers 属性

基线广泛可用

此功能已成熟稳定，适用于多种设备和浏览器版本。自 2015 年 7 月.

报告反馈

值

headers 属性是 HTMLTableCellElement 接口的一部分，它包含一个列表，其中包含针对此特定单元格的标题的 <th> 元素的 ID。

示例

包含以空格分隔的 ID 的字符串。

HTML

此示例列出了表格中最后一个被点击的单元格的 ID

<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>.

table {
  border-collapse: collapse;
}

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

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

JavaScript

html

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

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

js

规范

结果
规范 # HTML 标准

浏览器兼容性

dom-tdth-headers