javascript - 更改表格行的颜色 onclick 并更改回 onclick

Question

我正在寻找一种方法来更改 TR onclick 的背景颜色，然后再将其更改回 onclick。喜欢选择和取消选择一行。

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>First item</td>
      <td>Good quality</td>
      <td>Europe</td>
      <td>Cheap</td>
    </tr>
  </tbody>
</table>

我发现了大约 20 个脚本，它们都做了几乎相同的事情:一旦单击该行改变了背景颜色，您就无法通过再次单击将其返回。

我当前的表格 CSS 代码:

table {border-collapse: collapse; background: #041c32; }
tr:nth-of-type(odd) {background: #041c32;}
tr:nth-of-type(even) {background: #062949;}
th {background: #1b558e; color: #041c32;}
tr:hover {color:#ffc000; background-color:#000;}

如有任何帮助，我们将不胜感激!

Answer 1

可以添加一个 css 类 highlighted 来定义当行被点击和高亮时你想要的颜色，然后如果你使用 jQuery 你可以简单地做

$('table tr').on('click', () => $(this).toggleClass('highlighted'));

这个点击，如果类不存在，将添加类，如果存在，将删除类，给定你想要的行为