直接设置 `table.style.backgroundcolor` 仅影响未被子元素样式覆盖的区域，无法覆盖已通过 `cell.style.background` 显式指定颜色的单元格；要彻底清空，必须同时重置表格自身及所有相关单元格的内联背景样式。
在 Web 开发中，一个常见却容易被忽视的 CSS 层叠（cascade）与样式优先级问题，正是本例的核心：元素内联样式（inline style）的优先级高于其父容器的样式声明。当你执行：
tbl.style.backgroundColor = "#fff";
你只是为
元素设置了背景色——这仅在表格“空余区域”（如无内容单元格间的间隙、边框外延或未覆盖的 tbody 区域）可见；而所有已通过 cell.style.background = "#ff0" 显式赋值的 | 或 |
元素，其内联 background 样式会完全屏蔽表格层级的背景色。这就是为什么你观察到“大部分单元格被清空，唯独最后一列（即最近被 style.background 覆写的列）颜色残留”的根本原因：它不是排序导致的“魔法副作用”，而是纯粹的样式覆盖逻辑。 ✅ 正确做法是：清除操作必须作用于所有可能持有内联背景色的元素层级。以下是一个健壮、可复用的清除方案： function clearAllTableBackgrounds(table) {
// 1. 清除表格自身背景
table.style.backgroundColor = "";
// 2. 清除所有 , | , | 的内联 background 样式
const cells = table.querySelectorAll("tr td, tr th");
cells.forEach(cell => {
cell.style.backgroundColor = "";
// 可选：同时清除 background-color 和 background（更彻底）
// cell.style.background = "";
});
// 3. （可选）若需重置表头（ | ）的初始样式，也可统一处理
const headers = table.querySelectorAll("th");
headers.forEach(th => {
th.style.backgroundColor = "";
});
}
// 使用示例
const myTable = document.getElementById("my-table");
clearAllTableBackgrounds(myTable); ⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 element.style.background = null —— 应使用空字符串 "" 或 unset，以确保浏览器正确移除内联样式；
- background 是复合属性（含 color、image、repeat 等），若只需清背景色，推荐使用 backgroundColor；若需完全重置背景（如清除渐变或图片），则用 background: ""；
- 排序本身不修改样式，但排序前后对同一列反复调用 cell.style.background = ... 会强化该列的内联样式存在感，使其在后续“仅清表格”的操作中更显眼——这解释了为何“最后排序列”总被误认为是“异常列”；
- 若表格使用了 CSS 类控制主题色（如 .highlight { background: #ff0; }），应优先通过 classList.remove() 管理，而非混合使用内联样式与类，以提升可维护性。
总结：样式清除不是“一键覆盖”，而是“精准归零”。理解 CSS 优先级（内联 > ID > 类 > 元素）是解决此类问题的关键。始终记住：谁设的样式，就由谁来清——表格不能替单元格“背锅”。
|
|
