同一表格中的不同单元格在悬停时更改不同背景颜色的问题

<table>
  <tr>
    <td id="cell1">单元格1</td>
    <td id="cell2">单元格2</td>
    <td id="cell3">单元格3</td>
  </tr>
  <tr>
    <td id="cell4">单元格4</td>
    <td id="cell5">单元格5</td>
    <td id="cell6">单元格6</td>
  </tr>
</table>

#cell1, #cell4 {
  background-color: #ff0000; /* 单元格1和单元格4的默认背景颜色 */
}

#cell2, #cell5 {
  background-color: #00ff00; /* 单元格2和单元格5的默认背景颜色 */
}

#cell3, #cell6 {
  background-color: #0000ff; /* 单元格3和单元格6的默认背景颜色 */
}

#cell1:hover, #cell2:hover, #cell3:hover {
  background-color: #ffff00; /* 悬停时的背景颜色 */
}

#cell4:hover, #cell5:hover, #cell6:hover {
  background-color: #ff00ff; /* 悬停时的背景颜色 */
}

var cells = document.getElementsByTagName("td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("mouseover", function() {
    this.style.backgroundColor = "#ffff00"; /* 悬停时的背景颜色 */
  });

  cells[i].addEventListener("mouseout", function() {
    var id = this.getAttribute("id");
    var defaultColor;

    switch (id) {
      case "cell1":
      case "cell4":
        defaultColor = "#ff0000"; /* 单元格1和单元格4的默认背景颜色 */
        break;
      case "cell2":
      case "cell5":
        defaultColor = "#00ff00"; /* 单元格2和单元格5的默认背景颜色 */
        break;
      case "cell3":
      case "cell6":
        defaultColor = "#0000ff"; /* 单元格3和单元格6的默认背景颜色 */
        break;
    }

    this.style.backgroundColor = defaultColor;
  });
}