Javascript单击时获取表格单元格内容

Question

    <table id="position">
        <tr><td>TL</td><td>TC</td><td>TR</td></tr>
        <tr><td>CL</td><td>CC</td><td>CR</td></tr>
        <tr><td>BL</td><td>BC</td><td>BR</td></tr>
    </table>
    <script>
    document.querySelector("#position td").addEventListener("click", function(){
    console.log(this.innerHTML);
});

试图<td>在点击时获取表格单元格的innerHTML 。它什么都不返回。当我将选择器更改为#position tr它返回数据时，但仅用于第一<tr>行，当我单击它时。单击第二个，第三个时 - 不返回任何内容。显然，当我将选择器更改为表格时，#position它可以正常工作并返回整个表格。

我什至尝试为每个单元格添加类<td class="cell">-document.querySelector(".cell").innerHTML返回内容，但再次 - 仅适用于第一个<td>单元格！

如何被点击td，为什么它的行为如此奇怪？另外，是否可以点击行/列号？

Answer 1

向表的 tbody 添加单个侦听器，并从事件对象中检索单击的单元格，如下所示：

const tbody = document.querySelector('#position tbody');
tbody.addEventListener('click', function (e) {
  const cell = e.target.closest('td');
  if (!cell) {return;} // Quit, not clicked on a cell
  const row = cell.parentElement;
  console.log(cell.innerHTML, row.rowIndex, cell.cellIndex);
});

<table id="position">
  <tr>
    <td>TL</td>
    <td>TC</td>
    <td>TR</td>
  </tr>
  <tr>
    <td>CL</td>
    <td>CC</td>
    <td>CR</td>
  </tr>
  <tr>
    <td>BL</td>
    <td>BC</td>
    <td>BR</td>
  </tr>
</table>

这种技术称为事件委托，它利用了事件冒泡机制的优势，其中事件也在实际点击元素的每个祖先元素上触发。它非常有用，特别是在处理动态表时，并且对于静态表也很方便。

如您所见（在 中console.log），表格行和单元格具有特定row/cellIndex属性。它是动态的，您可以使用这些属性来获取“行/列号”。