如何在选择/单击时突出显示ui网格行，它有六个固定的列？

<table id="grid">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
    <th>列4</th>
    <th>列5</th>
    <th>列6</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
  <!-- 其他行... -->
</table>

#grid {
  border-collapse: collapse;
}

#grid th, #grid td {
  border: 1px solid black;
  padding: 8px;
}

#grid tr.highlight {
  background-color: yellow;
  color: black;
}

var rows = document.querySelectorAll("#grid tr");

rows.forEach(function(row) {
  row.addEventListener("click", function(event) {
    // 移除其他行的高亮样式
    rows.forEach(function(row) {
      row.classList.remove("highlight");
    });

    // 添加被点击行的高亮样式
    event.target.parentNode.classList.add("highlight");
  });
});