js点击table一行变色

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

.highlight {
  background-color: yellow;
}

document.addEventListener('DOMContentLoaded', function() {
  var tableRows = document.querySelectorAll('#myTable tr');

  tableRows.forEach(function(row) {
    row.addEventListener('click', function() {
      // Remove highlight from all rows
      tableRows.forEach(function(r) {
        r.classList.remove('highlight');
      });
      // Add highlight to the clicked row
      this.classList.add('highlight');
    });
  });
});

// 确保CSS类已正确添加
row.addEventListener('click', function() {
  console.log(this.classList); // 查看点击行的类列表
  this.classList.toggle('highlight');
});