Html表格-鼠标悬停时突出显示特定列的行

<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>行1 列1</td>
    <td>行1 列2</td>
    <td>行1 列3</td>
  </tr>
  <tr>
    <td>行2 列1</td>
    <td>行2 列2</td>
    <td>行2 列3</td>
  </tr>
  <!-- 其他行... -->
</table>

tr:hover .highlight {
  background-color: yellow;
}

var table = document.querySelector('table');
table.addEventListener('mouseover', function(event) {
  var target = event.target;
  if (target.tagName === 'TD') {
    var column = target.cellIndex;
    var rows = table.querySelectorAll('tr');
    for (var i = 1; i < rows.length; i++) {
      rows[i].classList.add('highlight');
      rows[i].cells[column].classList.add('highlight');
    }
  }
});

table.addEventListener('mouseout', function(event) {
  var target = event.target;
  if (target.tagName === 'TD') {
    var column = target.cellIndex;
    var rows = table.querySelectorAll('tr');
    for (var i = 1; i < rows.length; i++) {
      rows[i].classList.remove('highlight');
      rows[i].cells[column].classList.remove('highlight');
    }
  }
});