如何在单击时更改 HTML 表格单元格颜色

【问题标题】：How do I change HTML table cell color on click如何在单击时更改 HTML 表格单元格颜色
【发布时间】：2011-04-12 22:56:19
【问题描述】：

当用户单击单元格时，我正在尝试更改 HTML 表格单元格的背景颜色。关于如何做到这一点的任何想法？我可以访问 JS Prototype 库，因此欢迎对 Prototype 或直接 Javascript 提出任何建议。

【问题讨论】：

标签： javascript html css html-table cell

【解决方案1】：

您可以遍历表格的所有子级并向它们添加点击事件

使用原型的代码是：

$('your_table').observe('click', function(event) {
  var clickedCell = event.findElement('td');
  if (clickedCell) {
   clickedCell.setStyle({ background: '#dfd' });
  }
});

【讨论】：

【解决方案2】：

我并不精通 Prototype 框架，但这里有一些原始 Javascript 可以满足您的需求：

var table = document.getElementsByTagName('table')[0];
if(table) table.onclick = function(e) {
    var target = (e || window.event).target;
    if (target.tagName in {TD:1, TH:1})
        target.setAttribute('style', 'background-color: #F00');
};

在jsFiddle上测试它

【讨论】：

【解决方案3】：

丑，但演示效果：

  <table>
    <tr>
        <td onclick="this.style.backgroundColor = 'Red';">Sample</td>
        <td onclick="this.style.backgroundColor = 'Blue';">Data</td>
    </tr>
  </table>

【讨论】：