如何在不键入 25 个函数的情况下更改单元格中的颜色

Question

我的桌子有问题

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

我想在一个单元格中更改颜色而不给单元格另一个 id 并键入 x5 这个相同的功能到另一个单元格，好吧，这是一个 js 代码：

function func1() {
  let table = document.querySelector("td");     
  alert("pole" + table + "nacisniete");      
  table.style.backgroundColor = "grey"; 
}

如果我点击单元格 2，单元格 1 改变颜色，我想有 1 个功能，这必须改变所选单元格中的颜色

对不起我的英语，我来自波兰

我想将另一个 ID 写入另一个单元格，我必须有 25 个函数才能完成这项工作，所以我选择查询选择器来选择一个单元格，但这不起作用，我选择了单元格 2 并将颜色更改为单元格 1

Answer 1

我没有在每个 TD 上使用一个函数，而是使用 document.querySelectorALL 循环遍历 TD 并为每个 TD 提供一个事件侦听器。此外，我正在添加一个类而不是在 javascript 中更改它，因为这将为您提供更多选择。我注释掉了两行，这些行将删除已单击的 td 上的背景，因此一次只能单击一个。你不需要那个，但我不确定那是否是你想要的。

let tds = document.querySelectorAll("td");
tds.forEach((td) => {
  td.addEventListener("click",() =>{
     //let active = document.querySelector("td.active");
     //if(active) active.classList.remove("active");
     td.classList.add("active");
  });
});

td.active{
  background:gray
}

<table border="1" width="100%">
<tr>
<td>1</td> 
<td>2</td> 
<td>3</td> <td>4</td> 
<td>5</td>
</tr>
</table>