javascript - 单击时如何更改没有 id/class 的特定 'td' 元素的背景颜色？

Question

我正在用 HTML 处理一张大表(比如 100*100)。因此，无法为每个元素提供其 id/class。我想更改被单击的单元格的 bg 颜色(通过 javascript)。我怎么知道点击了哪个单元格，或者请建议我执行相同操作的任何其他替代方法。

Answer 1

您可以在表 上设置一个处理程序，并在the bubbling phase 期间通过事件委托(delegate)捕获click 事件。 .这将避免在表格的每个单元格上设置一个处理程序，这可能非常昂贵，尤其是当表格有很多单元格时(如在您的特定场景中)。

Javascript

let table = document.querySelector('table'); 
/* or other selector retrieving the table */

table.addEventListener('click', function(ev) {
   let tgt = ev.target.nodeName.toLowerCase();
   if (tgt === 'td') {
      tgt.classList.add('selected');
   }
});

使用此脚本，.selected 类将被应用一次到接收到点击事件的单元格。使用类名而不是设置内联样式的选择允许您远离 javascript 的样式，因此您的代码可以更易于维护。

CSS

.selected {
   background: yellowgreen;
}