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

Posted 2023-03-05

【中文标题】如何在单击时更改 HTML 表格单元格颜色

【英文标题】：How do I change HTML table cell color on click

【发布时间】：2011-04-12 22:56:19

【问题描述】：

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

【参考方案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>