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

要实现点击特定表格行更改背景颜色的功能，可以使用JavaScript来操作DOM元素的样式。以下是一个简单示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Row Color</title>
<style>
  .highlight {
    background-color: yellow;
  }
</style>
</head>
<body>

<table id="myTable" border="1">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
</table>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
  var table = document.getElementById('myTable');
  var rows = table.getElementsByTagName('tr');

  for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener('click', function() {
      // Remove highlight from all rows
      for (var j = 0; j < rows.length; j++) {
        rows[j].classList.remove('highlight');
      }
      // Add highlight to the clicked row
      this.classList.add('highlight');
    });
  }
});

解释

HTML部分：创建了一个简单的表格，并定义了一个CSS类.highlight用于改变背景颜色。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取表格元素及其所有行。
- 为每一行添加点击事件监听器。
- 当某一行被点击时，首先移除所有行的highlight类，然后为当前点击的行添加highlight类。