javascript - 如何在java脚本中更改表格行颜色onclick函数

Question

如何使用 HTML 中的内联 Javascript 更改选定的表格行颜色我正在尝试这种方式

onclick="this.style.backgroundColor='blue'" 我正在写这个

<tr onclick="this.style.backgroundColor='blue'">
   <td>row1</td>
   <td>row2</td>
</tr>

当我单击第 1 行时，该行颜色应变为蓝色。当我再次单击第 2 行时，第 1 行背景颜色重置为正常，第 2 行背景颜色变为蓝色我怎样才能做到这一点。

标签： javascripthtmlcss

Answer 1

如果你真的需要一个单行 js，那么（对于现代浏览器）：

.selected {
  background-color: coral;
}


table {
    border-spacing:0;
}

<table>
  <tr onclick="var s = this.parentNode.querySelector('tr.selected'); s && s.classList.remove('selected'); this.classList.add('selected');">
    <td>row1</td>
    <td>row2</td>
  </tr>
  
  <tr onclick="var s = this.parentNode.querySelector('tr.selected'); s && s.classList.remove('selected'); this.classList.add('selected');">
    <td>row1</td>
    <td>row2</td>
  </tr>
</table>