更改背景颜色单击特定表行

<table>
  <tr id="row1">
    <td>行1</td>
    <td>内容1</td>
  </tr>
  <tr id="row2">
    <td>行2</td>
    <td>内容2</td>
  </tr>
  <tr id="row3">
    <td>行3</td>
    <td>内容3</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px;
}

tr.selected {
  background-color: yellow;
}

// 获取所有表行元素
var rows = document.getElementsByTagName("tr");

// 为每个表行元素添加点击事件监听器
for (var i = 0; i < rows.length; i++) {
  rows[i].addEventListener("click", function() {
    // 移除其他表行的选中状态
    for (var j = 0; j < rows.length; j++) {
      rows[j].classList.remove("selected");
    }
    
    // 添加当前点击表行的选中状态
    this.classList.add("selected");
  });
}