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

Question

我试图在用户单击单元格时更改HTML表格单元格的背景颜色。任何想法如何做到这一点？我可以访问JS Prototype库，所以对Prototype或者直接Javascript的任何建议都会受到欢迎。

Answer 1

丑陋，但是演示效果：

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

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

Answer 3

你可以遍历表的所有孩子和一个点击事件添加到它们

与原型的代码是：

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