HTML/CSS无法实现条件格式化，因CSS无法读取单元格内容或数值关系；必须用JavaScript遍历元素、判断数据并动态添加语义化class，再通过CSS统一控制样式。
HTML 本身没有内置的「条件格式化」机制，不像 Excel 那样点几下就能高亮前10%或重复值——你必须用 JavaScript 主动判断数据、再用 CSS 控制样式。
为什么不能直接用 <table> + CSS 实现条件格式？
CSS 无法读取单元格内容或数值关系，:nth-child 只能按位置选，:has() 目前不支持嵌套文本匹配（比如“包含‘逾期’二字”或“值大于100”）。所以纯 HTML/CSS 无法实现真正的条件格式逻辑。
常见错误现象：
- 写一堆
.high-risk { background: red; }，但没 JS 去动态加这个 class - 误以为
colspan或rowspan能触发条件渲染 - 用
style="background-color: #f00"写死在 HTML 里，结果数据一变就失效
用 JavaScript 判断 + class 切换是最稳的方案
核心思路：遍历 <td> 或 <tr>，提取文本/数字，用 if 或 switch 决定加什么 class。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
document.querySelectorAll('table tbody td')获取所有数据单元格 - 对每个
cell，先用parseFloat(cell.textContent)转数字；失败则用cell.textContent.trim()做字符串判断 - 用
cell.classList.add('overdue')添加语义化 class，避免内联 style - 在 CSS 里统一定义
.overdue { background: #ffebee; }，方便后续改主题
示例片段：
const cells = document.querySelectorAll('table.data-table td.amount');
cells.forEach(cell => {
const val = parseFloat(cell.textContent);
if (!isNaN(val) && val > 1000) {
cell.classList.add('high-amount');
}
});
处理文字关键词比数值更易踩坑
字符串匹配看似简单，但容易忽略大小写、空格、全角/半角、隐藏字符等问题。
使用场景：
- 标记状态列：如 “已完成”、“处理中”、“已取消”
- 高亮含特定词的备注栏（如 “紧急”、“重试”）
关键点：
- 一律用
cell.textContent.trim().toLowerCase()统一处理后再比对 - 避免
indexOf('紧急') !== -1这种裸写法，改用正则/紧急/i.test(text)更安全 - 如果要匹配“以XX开头”，用
text.startsWith('待审核')；匹配“包含XX且不包含YY”，拆成两个includes()判断
性能注意：大数据量时别用 innerHTML 重绘整表
当表格有上千行，每次改数据都用 table.innerHTML = newHtml，会强制重排重绘，卡顿明显。
更优做法：
- 只更新变化的单元格：
cell.textContent = newValue; cell.className = getClassesByValue(newValue); - 用
DocumentFragment批量插入新行，而非逐个appendChild - 对频繁刷新的表格，加节流（throttle）或防抖（debounce），比如每 200ms 最多执行一次格式化
容易被忽略的地方是：很多人写了条件格式逻辑，却忘了监听数据变更。如果是用 AJAX 加载数据，记得在 fetch().then() 里调用格式化函数；如果是用户手动编辑 contenteditable 单元格，得监听 input 事件并做 debounce。
