如何用纯JS实现点击表格单元格返回其ID并修改背景色？

当然可以用纯JavaScript搞定这个需求，这是表格交互里很常见的功能，我给你两种实用的实现思路，你可以根据表格的规模来选：

方法一：直接给每个单元格绑定点击事件 #

如果你的表格单元格数量不多，这种方式简单直观，直接遍历所有<td>元素，给每个绑定点击事件即可：

// 获取页面上所有的td元素
const allTableCells = document.querySelectorAll('td');

// 遍历每个单元格，绑定点击事件处理函数
allTableCells.forEach(cell => {
  cell.addEventListener('click', function() {
    // 获取当前被点击单元格的ID
    const clickedCellId = this.id;
    console.log('你点击的单元格ID是：', clickedCellId);
    
    // 方式1：推荐用CSS类来切换样式（样式和逻辑分离，更好维护）
    this.classList.toggle('cell-highlight');
    
    // 方式2：直接修改元素的style属性（适合快速测试，不推荐长期维护）
    // if (this.style.backgroundColor === 'coral') {
    //   this.style.backgroundColor = '';
    // } else {
    //   this.style.backgroundColor = 'coral';
    // }
  });
});

对应的CSS样式（用类的方式时需要添加）：

.cell-highlight {
  background-color: coral;
}

这里的this指向触发点击事件的那个<td>元素，所以直接访问this.id就能拿到你预先设置的唯一ID啦。

方法二：事件委托（更高效，适合大表格/动态单元格） #

如果你的表格很大，或者后续会动态添加单元格，事件委托是更优的选择——只需要给表格的父元素（比如<table>）绑定一次点击事件，就能处理所有子单元格的点击：

// 获取表格元素
const targetTable = document.querySelector('table');

// 给表格绑定点击事件
targetTable.addEventListener('click', function(event) {
  // 确认点击的目标是td元素（避免点击到表格的其他部分）
  if (event.target.tagName === 'TD') {
    const clickedCellId = event.target.id;
    console.log('你点击的单元格ID是：', clickedCellId);
    
    // 同样用类来切换背景色
    event.target.classList.toggle('cell-highlight');
  }
});

这种方式的优势是：

• 只绑定一个事件，性能更优
• 后续动态新增的<td>元素也会自动拥有这个点击功能，不需要重新绑定事件

核心逻辑说明 #

不管用哪种方法，核心都是获取触发点击事件的<td>元素：

• 方法一里用this（因为事件处理函数是绑定在td上的，this指向当前td）
• 方法二里用event.target（事件对象的target属性指向实际触发事件的元素）

拿到这个元素后，直接访问它的.id属性就能得到你预先设置的唯一ID，然后通过classList.toggle或者直接修改style来切换背景色就可以了。

内容的提问来源于stack exchange，提问作者user9359311