如何为表格行实现交替样式（奇偶行不同颜色）-php教程-PHP中文网

如何为表格行实现交替样式（奇偶行不同颜色）

本文介绍两种为数据库查询结果的表格行设置交替样式的专业方法：推荐使用纯css的 :nth-child() 选择器实现无侵入式样式分离；同时提供php逻辑控制的备选方案，确保每行动态分配不同类名（如 hscrb/hscrg），避免重复渲染与结构混乱。

本文介绍两种为数据库查询结果的表格行设置交替样式的专业方法：推荐使用纯css的 :nth-child() 选择器实现无侵入式样式分离；同时提供php逻辑控制的备选方案，确保每行动态分配不同类名（如 hscrb/hscrg），避免重复渲染与结构混乱。

在构建统计类页面时，常需将数据库查询结果以表格形式展示，并通过视觉区分提升可读性。你当前的代码存在两个关键问题：一是 HTML 结构错误——每个

被重复输出两次（一次 hscrB、一次 hscrG），导致每条数据实际渲染为两行；二是样式逻辑混杂在 PHP 中，既不利于维护，也违背“关注点分离”原则。

✅ 推荐方案：纯 CSS 实现交替样式（最佳实践）
只需为

添加语义化 class（如 stats-table），并在 CSS 中定义：

.stats-table tr:nth-child(odd) {
  background-color: #e6f7ff; /* 浅蓝色，对应原 hscrB */
}
.stats-table tr:nth-child(even) {
  background-color: #e8f5e9; /* 浅绿色，对应原 hscrG */
}

HTML 表格结构应保持简洁规范：

用户名	奖项	日期

PHP 部分精简为：

智谱清言 - 免费全能的AI助手

智谱清言是一款基于 GLM 大模型的通用 AI 助手与 Agent 工具。

下载

<?php // 数据库连接（略）
$sql = "SELECT username, prize, date FROM enter";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
  while ($row = mysqli_fetch_assoc($result)) {
    echo '<tr>';
    echo '<td>
<img src="./Charity%20Contributors_files/ICON.ico" alt=""> ';
    echo '<a class="user-link" target="_blank">' . htmlspecialchars($row["username"]) . '</a>
</td>';
    echo '<td>' . htmlspecialchars($row["prize"]) . '</td>';
    echo '<td>' . htmlspecialchars($row["date"]) . '</td>';
    echo '</tr>';
  }
} else {
  echo '<tr><td colspan="3">0 results</td></tr>';
}
mysqli_close($conn);
?>

⚠️ 注意事项：

使用 htmlspecialchars() 防止 XSS 攻击；
确保闭合完整，避免浏览器解析异常；
:nth-child(odd/even) 基于父元素下所有计数（含），若需严格按数据行计数，建议将内容置于内，或改用 :nth-of-type()。
? 备选方案：PHP 控制类名（兼容旧项目）
若因历史原因必须用 PHP 动态分配类名，可采用布尔翻转逻辑：
```
$useBlue = true;
while ($row = mysqli_fetch_assoc($result)) {
  $class = $useBlue ? 'hscrB' : 'hscrG';
  echo '<tr class="' . $class . '">';
  // ... 输出单元格内容 ...
  echo '</tr>';
  $useBlue = !$useBlue; // 切换状态
}
```
该方式虽可行，但增加了服务端逻辑复杂度，且无法利用 CSS 的伪类强大能力（如 hover、transition 等）。因此，强烈建议优先采用 CSS :nth-child 方案——它更轻量、更灵活、更符合现代 Web 开发规范。