点击单元格时突出显示表格单元格

Question

我有一个表格。当我点击单元格时，希望它被高亮显示，再次点击单元格即可清除高亮。另外一个问题是，我想逐个高亮显示多个单元格，并保留之前的高亮显示。示例代码在这里：http://jsfiddle.net/2Lu3ss9g/。

$(function() {
  $('td').click(function() {
    $(this).parents('table').find('td').each(function(index, element) {
      $(element).removeClass('on');
    });
    $(this).addClass('on');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="color_changing" border="1" cellpadding="15">
  <tbody>
    <tr>
      <td>23</td>
      <td>57</td>
      <td>62</td>
      <td>1162</td>
    </tr>
    <tr>
      <td>112</td>
      <td>5</td>
      <td>162</td>
      <td>88</td>
    </tr>
    <tr>
      <td>77</td>
      <td>62</td>
      <td>199</td>
      <td>211</td>
    </tr>
    <tr>
      <td>57</td>
      <td>64</td>
      <td>144</td>
      <td>9</td>
    </tr>

  </tbody>
</table>

- Max

Answer 1

这里有一个使用 toggleClass 的简单解决方案：

$(function () {
    $('td').click(function () {
        $(this).toggleClass('highlight');
    });
});

Fiddle: http://jsfiddle.net/rqeec7r4/

- Bitwise Creative

---

非常感谢！这比我预想的要简单。 - Max