如何通过onmouseover事件配合PHP foreach实现表格整列悬停变色？

问题根源 #

你的代码存在两个核心问题：

• 重复ID违规：PHP循环生成的所有<td>都用了同一个id="table-data-otp"，但HTML规定ID必须唯一，getElementById只会返回第一个匹配元素，所以只有第一行生效。
• JS逻辑局限：仅操作单个元素，没有遍历整列的所有单元格。

方案1：纯CSS实现（最简单，推荐） #

无需JS，用CSS原生特性就能实现，高效且易维护。

修改后代码：

HTML结构（添加列分组标签）：

<table>
  <!-- 定义列分组，对应每一列 -->
  <colgroup>
    <col class="time-column">
    <!-- 其他列可依次添加col标签 -->
  </colgroup>
  <tr>
    <th class="table-header-otp">Time</th>
    <!-- 其他表头列 -->
  </tr>
  <!-- PHP生成的数据行 -->
</table>

PHP循环部分（删除重复ID，保留类名）：

<?php
foreach ((array) $parseData as $data) {
    $timeData = explode(",",$data);
?>
    <tr>
        <td class="table-data-otp"><?=$timeData[0]?></td>
    </tr>
<?php
}
?>

CSS样式：

/* 鼠标悬停时整列变色 */
.time-column:hover {
  background-color: red;
}
/* 表头同步变色 */
.table-header-otp:hover {
  background-color: red;
}
/* 鼠标离开后恢复原背景 */
.time-column, .table-data-otp {
  background-color: #B5EB74;
}

方案2：JS实现（适合复杂交互场景） #

如果必须用JS，需通过列索引遍历整列所有单元格：

修改后代码：

HTML表头（传递列索引给函数）：

<tr>
    <th class="table-header-otp" onmouseover="chooseColumn(0);" onmouseout="outColumn(0);">Time</th>
    <!-- 其他表头列索引依次为1、2... -->
</tr>

PHP循环部分（删除重复ID）：

<?php
foreach ((array) $parseData as $data) {
    $timeData = explode(",",$data);
?>
    <tr>
        <td class="table-data-otp"><?=$timeData[0]?></td>
    </tr>
<?php
}
?>

JS函数：

function chooseColumn(columnIndex) {
    // 获取表格所有行
    const rows = document.querySelectorAll('table tr');
    // 遍历行，跳过表头行（第一行）
    rows.forEach((row, index) => {
        if (index === 0) return;
        // 获取当前行对应列的单元格
        const cell = row.querySelectorAll('td')[columnIndex];
        if (cell) cell.style.background = "red";
    });
}

function outColumn(columnIndex) {
    const rows = document.querySelectorAll('table tr');
    rows.forEach((row, index) => {
        if (index === 0) return;
        const cell = row.querySelectorAll('td')[columnIndex];
        if (cell) cell.style.background = "#B5EB74";
    });
}

重要提醒 #

• 永远不要在循环中生成重复ID，这是HTML的基础规范，会导致选择器失效。
• 纯CSS方案比JS更简洁高效，优先使用，除非需要处理复杂交互逻辑。

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