本文讲解如何解决 jqgrid 中通过 `setcell` 设置的自定义单元格颜色（如背景色、文字色）在行被点击选中后无法跟随高亮样式变化的问题，核心是利用 css 优先级与继承机制，使自定义类在 `.ui-state-highlight` 等父级高亮状态下自动继承主题色。
在 jqGrid 中，若使用 setCell 方法为特定列（如 quarter1）动态设置内联样式（如 background 和 color），这些样式会以 style 属性直接写入 <td> 标签，其 CSS 优先级高于外部类（如 .ui-state-highlight）。因此，当用户点击某一行触发高亮状态时，该行其他列能正常变色，而你手动设色的列却“固守原色”，造成视觉不一致（如题图所示）。
根本原因在于：内联样式 > 外部 CSS 类 > 浏览器默认样式，而 jqGrid 的行高亮是通过向 <tr> 添加 .ui-state-highlight 类实现的，其样式作用于 <tr> 及其子 <td>，但无法覆盖已存在的 style="background:..." 内联声明。
✅ 正确解法：弃用内联样式，改用可继承的 CSS 类 + 高亮上下文重置
1. 定义语义化单元格样式类
首先，在全局 CSS（如 style.css 或 <style> 块中）定义一个自定义类（例如 mycolor），用于统一控制目标列的常规样式：
/* 常规状态下的样式 */
td.mycolor {
background-color: rgb(250, 250, 250) !important;
color: rgb(0, 0, 0) !important;
}⚠️ 注意：此处添加 !important 是为确保它能覆盖 jqGrid 默认的 ui-widget-content 行内样式（尤其在旧版 jqGrid 中常见），但仅限初始状态；后续高亮态将主动“撤回”它。
2. 使用 setCell 应用 CSS 类而非内联样式
修改你的 onloadFunction，不再传入 { background: ..., color: ... } 对象，而是传入字符串类名：
function onloadFunction(ids) {
var ids = $("#lstStudents").jqGrid("getDataIDs");
for (var z = 0; z < ids.length; z++) {
var id = ids[z];
// ✅ 正确：应用 class 名，不写内联 style
$("#lstStudents").jqGrid("setCell", id, "quarter1", "", "mycolor");
}
}setCell 第四个参数支持传入 class 字符串（文档明确支持），它会将 class="mycolor" 添加到对应 <td> 元素上，完全规避内联样式的干扰。
3. 强制高亮状态下继承父级颜色
关键一步：覆盖高亮行中 .mycolor 单元格的样式，使其主动继承父 <tr> 的高亮色。根据 jqGrid 主题，选择对应的选择器：
-
标准 jQuery UI 主题（推荐）：
.ui-widget-content .ui-state-highlight > td.mycolor { background-color: inherit !important; color: inherit !important; } -
Bootstrap 主题（如使用 ui.jqgrid-bootstrap.css）：
.ui-jqgrid-btable tr.ui-state-highlight > td.mycolor, .table-hover tbody tr:hover > td.mycolor { background-color: inherit !important; color: inherit !important; }? 提示：可通过浏览器开发者工具检查选中行 <tr> 实际添加的 class（如 ui-state-highlight、jqgrow ui-state-highlight 或 active），再精准匹配。
✅ 效果验证
- 未选中时：<td class="mycolor"> 显示你定义的灰白底黑字；
- 行被点击后：<tr class="ui-state-highlight"> 生效，其子 <td.mycolor> 通过 inherit 自动采用 .ui-state-highlight 所定义的背景与文字色（如浅蓝底白字），与其他列完全一致。
? 补充建议
- 若需兼容多列（如 quarter1, quarter2, finalScore），可复用同一类名，或按需扩展 .mycolor-quarter1, .mycolor-final 等，并分别编写对应高亮规则；
- 避免在 setCell 中混用 style 和 class —— 统一使用 class 更易维护、更符合 CSS 最佳实践；
- 在 jqGrid 初始化时，可通过 colModel 的 classes 属性为整列预设 class（如 "classes":"mycolor"），进一步减少 loadComplete 中的循环操作。
此方案不依赖 JavaScript 动态切换颜色，纯靠 CSS 层叠与继承实现，性能高、逻辑清晰、易于调试与扩展。
