彩色表格单元格 onclick答案

【问题标题】：Color table cells onclick彩色表格单元格 onclick
【发布时间】：2017-06-03 13:31:40
【问题描述】：

我有一个 5x5 的表格，每个单元格包含一个单词。当我单击单词时，我希望将单元格的颜色更新为预定义的颜色。在下面的示例中，使用编码的颜色设置了一个表格 - 我希望它们是白色的，直到它们对应的单词被点击。

<TABLE BORDER="4" CELLSPACING="4" CELLPADDING="4">
    <TR>
        <TD BGCOLOR="#ffff00">Yellow</TD>
        <TD BGCOLOR="#00ff00">Green</TD>
    </TR>
    <TR>
        <TD BGCOLOR="#ff00ff">Purple</TD>
        <TD BGCOLOR="00ffff">Blue</TD>
    </TR>
</TABLE>

【问题讨论】：

我相信this 就是您要找的。span>
“帮我做作业”你尝试了什么？
这有点苛刻@epascarello。除了基本的 HTML 之外，我还没有编写过任何 Web 编码，当然也不是为了家庭作业。
@James 不，不是。人们不费吹灰之力就可以免费得到答案。这是非常基本的。

标签： javascript html css

【解决方案1】：

如果你想使用 vanilla Javascript，你可以添加一个简单的 onClick 事件监听器并设置颜色。颜色需要存储在data-bgcolor 属性中。

const tableCells = document.querySelectorAll('TD')

tableCells.forEach( function (cell) {
  cell.addEventListener('click', function (e) {
    e.target.style.backgroundColor = e.target.dataset.bgcolor;
  })
})

<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
  <TR>
    <TD data-bgcolor="#ffff00">Yellow</TD>
      <TD data-bgcolor="#00ff00">Green</TD>
  </TR>
  <TR>
    <TD data-bgcolor="#ff00ff">Purple</TD>
      <TD data-bgcolor="#00ffff">Blue</TD>
  </TR>
</TABLE>

【讨论】：

这在 Firefox 中不起作用：tableCells.forEach is not a function.

【解决方案2】：

使用 jQuery 你可以做到这一点：

$('table td').on('click', function() {
  $(this).attr("bgcolor", $(this).attr("data-color"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
<TR>
<TD data-color="#ffff00">Yellow
<TD data-color="#00ff00">Green
</TR>
<TR>
<TD data-color="#ff00ff">Purple
<TD data-color="00ffff">Blue
</TD>
</TR>
</TABLE>

对于较大的项目，我建议按 ID 选择表格。

【讨论】：