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

我不太熟悉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

上测试

Answer 3

您可以遍历表格的所有子项并向其添加点击事件

原型代码是：

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

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

3 个答案: