如何用单个JS函数实现表格单元格点击变色（无需多函数/单独ID）

问题原因 #

你当前代码里的document.querySelector("td")只会返回页面中第一个匹配的<td>元素，所以不管点击哪个绑定了func1()的单元格，最终都会修改第一个单元格的背景色。

方案一：修改现有函数，传递点击元素 #

如果想保留现有HTML的写法，只需要修改onclick传参和函数逻辑：

1. 更新HTML的onclick属性，把当前点击的单元格传进函数：

<td onclick="func1(this)">1</td> 
<td onclick="func1(this)">2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td>

2. 改写JavaScript函数，直接操作传入的单元格：

function func1(clickedTd) {
  clickedTd.style.backgroundColor = "grey";
}

方案二：事件委托（更推荐） #

这种方式不需要给每个单元格单独绑定onclick，只给父容器（比如<table>）绑定一个点击事件，就能处理所有单元格的点击，完全符合你“无需重复代码”的需求：

1. 简化HTML，去掉所有onclick属性：

<table>
  <tr>
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td>
  </tr>
</table>

2. 编写JavaScript事件委托逻辑：

// 获取表格容器
const table = document.querySelector("table");

// 给表格绑定点击事件
table.addEventListener("click", function(event) {
  // 判断点击的元素是不是td
  if (event.target.tagName === "TD") {
    // 修改当前点击td的背景色
    event.target.style.backgroundColor = "grey";
  }
});

这样不管后续新增多少个单元格，都不用额外写绑定逻辑，一个函数就能处理所有点击。

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