直接在<td>里加动态计算的class实现颜色预警：根据校准日期和周期算出下次到期日，用new Date()解析ISO格式日期，再比对当前日期，返回"overdue"/"warning"/"normal"状态，对应.status-overdue等CSS类设置背景色与文字色，避免内联style和!important，兼顾移动端与导出兼容性。
校准到期时间怎么用颜色标出来
直接在 <td> 里加 style 属性最简单，但别硬编码颜色值——得根据当前日期和 calibration_date、interval_months 动态算。比如设备校准日期是 2024-03-15，周期 6 个月，那下次到期日就是 2024-09-15；今天如果过了这天，就标红；提前 30 天内标橙；其余标绿。
关键不是“怎么变色”，而是“怎么算是否过期”。别用 JavaScript 手动 new Date() 拼字符串比对——容易出时区或格式错误。推荐用 new Date() 解析 ISO 格式日期（如 "2024-03-15"），再用月份加减法算到期日：
function getNextDue(calDateStr, months) {
const d = new Date(calDateStr);
d.setMonth(d.getMonth() + months);
return d;
}
- 传入的
calDateStr必须是"YYYY-MM-DD"格式，否则 Safari 可能解析失败 -
setMonth()会自动处理跨年，但不会处理月末溢出（比如 1月31日 + 1个月 → 3月3日），所以校准日期尽量统一存为每月1日，或后端返回已计算好的next_due_date - 颜色判断逻辑建议抽成独立函数，方便测试和复用：
getCalibrationStatus(dueDate)返回"overdue"/"warning"/"normal"
表格里每行颜色不一致，CSS 怎么写才不冲突
别用全局 tr:nth-child(odd) 这类选择器覆盖状态色——背景色会被优先级更高的 td 内联样式顶掉，反而让预警失效。正确做法是：只给 td 加 class，用 CSS 类控制颜色，比如：
.status-overdue { background-color: #ffe6e6; color: #d32f2f; }
.status-warning { background-color: #fff3e0; color: #ef6c00; }
.status-normal { background-color: #e8f5e9; color: #388e3c; }
然后在渲染时给对应单元格加上 class：
立即学习“前端免费学习笔记（深入）”；
<td class="status-overdue">2024-09-15</td>
- 避免用
!important强行覆盖，后期维护时容易漏掉它导致样式错乱 - 如果表格用了 Bootstrap 或其他 UI 框架，检查其
table-striped是否启用了tr:nth-child(even/odd)，得在自定义 CSS 中提高选择器权重，比如写成tbody tr td.status-overdue - 移动端小屏下文字可能被背景色吞掉，记得同时设
color，别只改background-color
后端返回的数据没带下次到期日，前端算不准怎么办
前端按月加减算到期日，看似简单，实则踩坑最多：不同月份天数不同、闰年、时区偏移都可能导致结果偏差 ±1 天。例如 new Date("2024-01-31").setMonth(1) 得到的是 2024-03-02，而不是预期的 2024-02-29 或 2024-03-01。
- 最稳妥的方式是后端直接返回
next_due_date字段（ISO 格式字符串），前端只做比对，不参与计算 - 如果必须前端算，用
date-fns的addMonths替代原生setMonth：format(addMonths(new Date(calDate), interval), "yyyy-MM-dd") - 千万别用字符串拼接月份（如
year + "-" + (month+1) + "-15"），遇到 12 月加 1 就变成 13 月，直接崩 - 测试时重点覆盖：2月29日、1月31日、12月加周期跨年这三类边界场景
导出 Excel 时颜色预警消失怎么补救
浏览器导出 HTML 表格为 Excel（比如用 table2excel 或 SheetJS），内联 style 或 class 里的背景色大概率不生效——Excel 不认 CSS，只认它自己的单元格样式。
- 用
xlsx库导出时，手动给ws[cell].s赋值样式对象，例如：fill: { fgColor: { rgb: "FFFFE6E6" } } - 如果用后端导出（如 Python 的
openpyxl），颜色逻辑要移到服务端，和数据库查出的状态一起决定单元格填充色 - 纯前端导出又不想引入大库？那就放弃 Excel 里的颜色，改在导出前弹窗提醒：“Excel 不支持颜色预警，建议用网页版查看实时状态”
颜色预警本质是状态可视化，不是装饰。真正在意预警效果的用户，不会只依赖导出文件——他们刷新页面看表格就够了。导出只是为了归档或打印，这时候加个醒目的文字标记（如“【已过期】”）比颜色更可靠。
