本文介绍如何在 PHP + MySQL 环境下，根据 SQL 查询结果中的状态字段（如 "Done"、"In Progress"、"Not Done"）自动为表格 行添加对应 CSS 类，实现按业务状态动态着色，无需 JavaScript 即可完成服务端渲染。
本文介绍如何在 php + mysql 环境下，根据 sql 查询结果中的状态字段（如 "done"、"in progress"、"not done"）自动为表格 `
在构建轻量级维修工单系统时，让表格行颜色直观反映工单进度（如“已完成”显示绿色、“进行中”显示黄色、“未开始”显示红色），能显著提升维护人员的工作效率与信息识别速度。实现这一效果的关键在于：将数据库中的状态值映射为预定义的 CSS 类名，并在 PHP 循环输出表格行时动态写入 class 属性。
✅ 步骤一：定义语义化 CSS 类
在 <style></style> 标签或外部 CSS 文件中声明清晰、可维护的状态样式：
.done {
background-color: #d4edda; /* 柔和绿色 */
color: #155724;
}
.inprogress {
background-color: #fff3cd; /* 柔和黄色 */
color: #856404;
}
.notdone {
background-color: #f8d7da; /* 柔和红色 */
color: #721c24;
}? 建议使用浅色背景+深色文字组合，兼顾可读性与视觉友好性；避免纯亮色（如
#FF0000），防止长时间查看造成视觉疲劳。
✅ 步骤二：PHP 动态绑定 class（推荐服务端渲染）
假设你已通过 PDO 或 MySQLi 查询出工单数据（如 $stmt->fetchAll(PDO::FETCH_ASSOC)），在循环中根据 status 字段值决定行类名：
立即学习“前端免费学习笔记（深入）”；
<?php foreach ($tickets as $ticket): ?>
<?php
// 安全映射：将数据库值标准化为 CSS 类名
$statusClass = match($ticket['status'] ?? '') {
'Done' => 'done',
'In Progress', 'In-Progress', 'in_progress' => 'inprogress',
'Not Done', 'Pending', 'Not Started' => 'notdone',
default => 'notdone'
};
?>
<tr class="<?= htmlspecialchars($statusClass) ?>">
<td><?= htmlspecialchars($ticket['customer_name']) ?></td>
<td><?= htmlspecialchars($ticket['device_model']) ?></td>
<td><?= htmlspecialchars($ticket['status']) ?></td>
<td><?= htmlspecialchars($ticket['updated_at']) ?></td>
</tr>
<?php endforeach; ?>⚠️ 注意事项：
- 务必对
$ticket中所有输出到 HTML 的字段调用htmlspecialchars()，防止 XSS 攻击；- 使用
match表达式（PHP 8.0+）提高可读性；若使用旧版 PHP，可用if/elseif或关联数组映射；- 数据库字段名（如
'status'）请根据实际表结构调整。
✅ 步骤三：完整 HTML 结构示例
确保 <table> 包含语义化结构，并配合 CSS 类生效：<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>维修工单看板</title>
<style>
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: 0.75rem; text-align: left; border: 1px solid #dee2e6; }
th { background-color: #f8f9fa; font-weight: 600; }
</style>
</head>
<body>
<h2>当前工单列表</h2>
<table>
<thead>
<tr>
<th>客户姓名</th>
<th>设备型号</th>
<th>进度状态</th>
<th>最后更新</th>
</tr>
</thead>
<tbody>
<!-- PHP 循环插入 <tr> -->
<?php foreach ($tickets as $ticket): ?>
<?php
$statusClass = match($ticket['status'] ?? '') {
'Done' => 'done',
'In Progress', 'In-Progress' => 'inprogress',
'Not Done', 'Pending' => 'notdone',
default => 'notdone'
};
?>
<tr class="<?= htmlspecialchars($statusClass) ?>">
<td><?= htmlspecialchars($ticket['customer_name']) ?></td>
<td><?= htmlspecialchars($ticket['device_model']) ?></td>
<td><?= htmlspecialchars($ticket['status']) ?></td>
<td><?= htmlspecialchars(date('Y-m-d H:i', strtotime($ticket['updated_at']))) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html></pre><h3>✅ 进阶建议（可选）</h3>
<ul>
<li>若需前端交互（如点击切换状态并实时变色），可在 AJAX 更新后用 <code>$(tr).removeClass().addClass(newClass) 配合 jQuery；
:hover 伪类增强交互反馈：.done:hover { background-color: #c3e6cb !important; }；通过以上方式，你无需依赖前端框架或复杂逻辑，即可在传统 LAMP 环境中快速实现专业级状态可视化——简洁、安全、可维护，真正服务于你的维修车间一线需求。
