HTMLTableCellElementï¼headers å±æ§

åºçº¿ å¹¿æ³å¯ç¨

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

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

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