HTMLTableCellElement：headers 属性

基线广泛可用

自 2015年7月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

HTMLTableCellElement 接口的 headers 属性包含一组为此特定单元格充当表头的 <th> 元素的 ID 列表。

本文内容

值

一个包含由空格分割的 ID 的字符串。

示例

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

HTML

html
<table>
  <tr>
    <th rowspan="2" id="h">家庭作业（ID = h）</th>
    <th colspan="3" id="e">考试（ID = e）</th>
    <th colspan="3" id="p">项目（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">期末（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">期末（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>
最后一次点击的单元格的表头 ID：<output>无</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 : "无";
});

结果

规范

HTML
# dom-tdth-headers

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2024年10月8日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题