Question

我有一个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>

Answer 1

使用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选择表格。

Answer 2

如果你想使用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>

彩色表格单元格点击

2 个答案: