javascript - 如何设置表格样式以便表格中的特定框在单击时更改颜色？

Question

如何使此表中的元素在单击它们时从背景颜色变为红色并恢复为默认颜色？

<table align="center" style="height: 355px;" width="664" border="3px">
  <tbody>
    <tr>
      <td style="width: 94px;">25</td>
      <td style="width: 94px;">26</td>
      <td style="width: 95px;">27</td>
      <td style="width: 95px;">28</td>
      <td style="width: 95px;">29</td>
      <td style="width: 95px;">30</td>
      <td style="width: 95px;">&nbsp;</td>
    </tr>
  </tbody>
</table>

Answer 1

为您想要的元素添加一个 onclick 监听器(我假设您正在动态生成单元格)

<table align="center" style="height: 355px;" width="664" border="3px">
      <tbody>
        <tr>
          <td style="width: 94px;" onclick="changeColor(this)">25</td>
          <td style="width: 94px;">26</td>
          <td style="width: 95px;">27</td>
          <td style="width: 95px;">28</td>
          <td style="width: 95px;">29</td>
          <td style="width: 95px;">30</td>
          <td style="width: 95px;">&nbsp;</td>
        </tr>
      </tbody>
    </table>

在 jquery 中你会做这样的事情(或者使用 javascript):

function changeColor(elt){
  $elt = $(elt);
  $elt.toggleClass("redBg");
}

在 CSS 中:

.redBg{
  background-color:red;
}