javascript - 如何在javascript中更改表格行颜色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 行背景颜色变为蓝色我该如何实现。

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>