HTMLTableCellElement: thuộc tính headers
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính headers của giao diện HTMLTableCellElement
chứa một danh sách các ID của các phần tử <th> là tiêu đề cho ô cụ thể này.
Giá trị
Một chuỗi chứa các ID được phân tách bằng khoảng trắng.
Ví dụ
Ví dụ này liệt kê ID của ô được nhấp cuối cùng của bảng:
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>.
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";
});
Kết quả
Đặc điểm kỹ thuật
| Specification |
|---|
| HTML # dom-tdth-headers |