JavaScript判断表格单元格数值范围应先用textContent.trim()取值，再用Number()转数字并校验isNaN，跳过非数值单元格，区间用左闭右开逻辑；动态更新后需重新调用高亮函数或通过框架响应式机制处理。
表格单元格数值范围判断逻辑怎么写
直接用 JavaScript 遍历 td 或 th，提取文本内容转成数字，再用 if-else 或 switch 判断区间——这是最可控的方式。正则或 parseFloat 都可能踩坑：parseFloat("12.5%") 得到 12.5，但 parseFloat("N/A") 得到 NaN，不加校验会把整个高亮逻辑搞崩。
推荐做法：
- 先用
textContent.trim()取值，避免空格干扰 - 用
Number()而非parseInt()或parseFloat()，它对空字符串、null返回NaN，行为更一致 - 必须检查
isNaN(value)，跳过非数值单元格（比如表头、单位、破折号） - 区间判断用左闭右开（如
value >= 0 && value ），避免边界值重复匹配
CSS 类名怎么设计才方便维护
别用内联 style 动态写颜色，后期改色、加动画、适配暗色模式都会变麻烦。统一用预设类名，比如 low、medium、high，在 CSS 里集中定义背景和文字颜色。
关键细节：
立即学习“前端免费学习笔记（深入）”；
- 类名要语义化，避免用
red-bg这种纯样式命名，因为“低值”未来可能改成黄色也不奇怪 - 给
td和th都加 class，否则表头数值（如“平均分”）也会被正确着色 - 加一条通用重置：
td, th { background-color: inherit; }，防止某些浏览器默认背景干扰
怎么避开 table 自动合并单元格导致的错位
rowspan 和 colspan 会让 querySelectorAll("td") 拿到的节点顺序和视觉顺序不一致，结果高亮错列。这不是 bug，是 DOM 结构本来就这样。
稳妥解法：
- 只处理明确有数值的单元格，避开带
rowspan的汇总行（比如“合计”行） - 用
tr.cellsAPI 替代全局查询：for (const row of table.rows) { for (const cell of row.cells) { ... } }，它按渲染顺序遍历，天然兼容合并单元格 - 如果必须用
querySelectorAll，加过滤：cell => !cell.hasAttribute("rowspan") && !cell.hasAttribute("colspan")
动态表格更新后高亮失效怎么办
表格内容用 AJAX 或 Vue/React 更新后，DOM 已变，但之前的高亮 class 还留在老节点上，新节点没处理——这是最常见的遗漏点。
应对方式取决于场景：
- 纯静态页：初始化一次就够了，绑定在
DOMContentLoaded - AJAX 加载：每次
innerHTML替换后，立刻调用高亮函数，传入新table元素 - 前端框架：不要操作 DOM，改用计算属性或 effect 监听数据变化，触发 class 绑定（如 Vue 的
:class） - 万能兜底：封装成函数
highlightTable(tableEl, rules)，规则数组可复用，哪里需要就调哪里
最容易被忽略的是：当数值带单位（如 “85.2 kg”、“−3.1°C”）时，正则提取不干净就会漏掉负号或小数点，Number() 直接返回 NaN——得先用 replace(/[^-\d.]/g, "") 清洗，但注意别误删负号和小数点。
