求助：基于room_name变化用jQuery修改表格行背景色

我来帮你搞定这个表格行分组变色的需求——你想要的是同一房间的所有行用相同背景色，不同房间切换颜色，对吧？先看看你原来的JS代码里踩的几个坑：

原代码的问题 #

• 初始化room的时候错拿了第二行（rows[1]）的房间名，但表格的第一行（rows[0]）是表头，实际数据行从tbody里的第一行开始，应该从这里取初始房间值
• if条件后面多了个分号：if (room == document.getElementById("tblMain").rows[i].cells[0].innerHTML;)，这会导致条件判断直接失效
• 更新room的语句写在了for循环外面，逻辑完全错误，应该在每次判断完当前行后，若房间名变化才更新room变量

修正后的原生JavaScript方案 #

这个版本会遍历所有数据行，对比当前行和上一行的房间名，变化时自动切换背景色：

const tbl = document.getElementById("tblMain");
if (!tbl) return;

const tbodyRows = tbl.querySelectorAll("tbody tr");
if (tbodyRows.length === 0) return;

// 初始化上一个房间名和当前颜色
let lastRoom = tbodyRows[0].cells[0].textContent.trim();
let currentColor = "#f1fafa";
tbodyRows[0].style.backgroundColor = currentColor;

// 遍历剩余数据行
for (let i = 1; i < tbodyRows.length; i++) {
  const currentRoom = tbodyRows[i].cells[0].textContent.trim();
  // 房间变化时切换颜色
  if (currentRoom !== lastRoom) {
    currentColor = currentColor === "#f1fafa" ? "#ffffff" : "#f1fafa";
    lastRoom = currentRoom;
  }
  tbodyRows[i].style.backgroundColor = currentColor;
}

更高效的后端（PHP）渲染方案 #

既然表格是PHP生成的，直接在后端给同一房间的行标记相同的类，用CSS控制颜色会更高效，不用前端额外处理：

PHP代码修改：

<table class="hoverTable dataTable" id="tblMain">
  <thead>
    <tr>
      <th>Room</th>
      <th>Machine</th>
      <th>Serial Number</th>
    </tr>
  </thead>
  <tbody>
    <?php 
    $lastRoom = null;
    $currentClass = 'row-color-1';
    foreach ($assignations as $assignation): 
      $currentRoom = $assignation->has('room') ? $assignation->room->name : '-';
      // 房间变化时切换样式类
      if ($currentRoom !== $lastRoom) {
        $currentClass = $currentClass === 'row-color-1' ? 'row-color-2' : 'row-color-1';
        $lastRoom = $currentRoom;
      }
    ?>
    <tr class="<?= $currentClass ?>">
      <td><?= $currentRoom ?></td>
      <td><?= $assignation->has('machine') ? $assignation->machine->name : '' ?></td>
      <td><?= $assignation->has('machine') ? $assignation->machine->serial_number : '' ?></td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

对应的CSS：

.row-color-1 { background-color: #f1fafa; }
.row-color-2 { background-color: #ffffff; }
/* 保留原有表格的hover交互效果 */
.hoverTable tr:hover { background-color: #e0f0f0 !important; }

效果示例 #

最终实现的效果和你期望的一致，比如：

<table border="1" cellpadding="4" cellspacing="4">
  <tr class="row-color-1">
    <td>room 1</td>
    <td>machine 1</td>
  </tr>
  <tr class="row-color-2">
    <td>room 2</td>
    <td>machine 2</td>
  </tr>
  <tr class="row-color-2">
    <td>room 2</td>
    <td>machine 3</td>
  </tr>
  <tr class="row-color-1">
    <td>room 4</td>
    <td>machine 4</td>
  </tr>
  <tr class="row-color-2">
    <td>room 7</td>
    <td>machine 5</td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者mbenjemaa