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

Question

我想在用户单击表格单元格时更改HTML表格单元格的背景颜色。有什么好的实现方法吗？我可以使用JS原型库，所以任何关于Prototype或纯Javascript的建议都可以。

- Rohan

Answer 1

虽然不太美观，但能展示效果：

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

- Larsenal

Answer 2

我对原型框架不是很熟悉，但以下是一些原始的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上测试它

- Kevin

Answer 3

你可以循环遍历表格的所有子元素，并为它们添加点击事件。

使用原型，代码如下：

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

- lock