静态HTML表格可用Chrome插件高亮，动态渲染表格必须用JavaScript+MutationObserver监听DOM变化并重算样式，配合作用域CSS类名避免冲突。
Chrome 插件直接高亮表格行，但只对静态 HTML 有效
如果目标页面是服务端渲染的静态表格（比如内部管理系统导出的 html 报表），highlight words 或 table highlighter 这类插件能快速圈出含特定值的行。它们本质是遍历 td 文本做字符串匹配，不解析语义，也不触发 js 渲染逻辑。
常见错误现象：Table Highlighter 对 React/Vue 动态渲染的表格完全失效——因为 DOM 还没挂载完它就跑完了；或者高亮了错误列，因插件默认匹配所有单元格，没限定字段名。
- 使用前先右键检查目标表格是否有稳定 class（如
class="data-table"），否则插件可能误标其他页面元素 - 匹配关键词时避免用空格或特殊符号，
Highlight Words不支持正则，"status: active"会匹配失败，得拆成status和active单独设色 - 颜色冲突风险：多个插件同时启用时，CSS
!important层叠可能导致背景色被覆盖，建议每次只开一个
用纯 JavaScript 注入脚本精准控制高亮逻辑
动态表格、需按字段值条件着色（比如金额 > 10000 的行标红）、或要兼容 Vue/React 组件更新后的 DOM，必须手写脚本。核心不是“加颜色”，而是监听数据变化后重算样式。
典型场景：后台表格每 5 秒通过 fetch 拉新数据并 render()，你不能只在页面加载时跑一次高亮逻辑。
- 别直接操作
innerHTML插入 style，改用classList.add()配合 CSS 类，避免内联样式污染和重复绑定 - 关键参数差异：
querySelectorAll("tr")会拿到表头tr，必须过滤掉，用document.querySelectorAll("tbody tr")更安全 - 性能影响：表格超 500 行时，逐行
getBoundingClientRect()判断是否在视口会卡顿，应加节流或只处理当前页 DOM
document.addEventListener('DOMContentLoaded', () => {
const highlightRows = () => {
document.querySelectorAll('tbody tr').forEach(row => {
const amountCell = row.querySelector('td:nth-child(4)');
if (amountCell && parseFloat(amountCell.textContent) > 10000) {
row.classList.add('high-value-row');
}
});
};
highlightRows();
// 若有分页或刷新按钮，监听其 click 后再调用 highlightRows()
});
CSS 类名必须带作用域，否则污染全局样式
很多人写完 JS 高亮，发现整个网站的表格都变色了——问题出在 CSS 类名太泛，比如 .highlight 或 .red，和项目原有样式冲突。
错误示例：.highlight { background: #ffeb3b !important; } —— 这个类可能被其他模块复用，且 !important 会让后续调试样式变得极其困难。
- 类名要带业务前缀，例如
data-table__over-budget，和 JS 中classList.add()严格一致 - 用
:not(.data-table)限制作用范围，或把样式写在<style>标签里并插入到目标表格父容器下，而非全局<head> - 兼容性注意：IE11 不支持
classList的部分方法（如toggle带第二个参数），若需支持，改用className字符串拼接
动态表格必须监听 DOM 变化，MutationObserver 是唯一可靠方案
Vue/React 表格更新后，DOM 节点被替换，之前绑定的 class 全丢，手动轮询 setTimeout 查 DOM 不仅耗性能，还容易漏帧。浏览器原生 MutationObserver 是唯一解法。
容易踩的坑：观察器回调里再次操作 DOM 触发新变动，导致无限循环；或没过滤无关节点（比如只关心 tbody，却监听了整个 document.body）。
- 只观察
childList和subtree，禁用attributes（表格高亮不依赖属性变更） - 回调中用
records.forEach(r => r.addedNodes.forEach(node => {...}))提取新增的tr，避免重复处理旧节点 - 务必在页面卸载前调用
observer.disconnect()，否则内存泄漏——尤其单页应用跳转时
