本文讲解如何解决 jqgrid 中通过 `setcell` 设置的单元格内联样式（如背景色、文字色）在行被选中时无法跟随高亮主题的问题，核心是利用 css 优先级与继承机制，使自定义类在 `.ui-state-highlight` 等父级状态类下正确继承颜色。
在 jqGrid 中，当使用 setCell 方法为特定列（如 quarter1）动态设置 background 或 color 样式时，jqGrid 会将这些样式以 内联 style 属性 的形式写入
✅ 正确解法：放弃内联样式，改用可继承的 CSS 类 + 精确作用域覆盖规则
1. 定义基础单元格样式类
首先，为需定制的列创建一个语义化 CSS 类（如 mycolor），并移除 setCell 中的内联样式参数：
/* 基础样式：应用于所有目标单元格 */
td.mycolor {
background-color: #fafafa; /* 等价于 rgb(250, 250, 250) */
color: #000000;
}2. 在 loadComplete 中应用 CSS 类而非内联样式
修改你的 onloadFunction，使用 setCell 的第 4 个参数（class）添加类名，不传 style 对象：
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");
}
}3. 强制高亮状态下继承父级颜色
关键一步：编写高优先级 CSS 规则，确保当行处于高亮状态时，.mycolor 单元格能继承该行的背景与文字色。根据所用 UI 框架选择对应选择器：
-
jQuery UI 主题（默认）：
.ui-widget-content .ui-state-highlight > td.mycolor { background-color: inherit !important; color: inherit !important; } -
Bootstrap 4/5（如使用 .table-hover 或 .table-striped）：
.table tbody tr.table-active > td.mycolor, .table tbody tr:hover > td.mycolor { background-color: inherit !important; color: inherit !important; }
⚠️ 注意：!important 是必要的，用于覆盖 jqGrid 内部可能存在的其他样式；> td 使用子选择器确保精准作用于直接子单元格，避免意外影响嵌套内容。
4. 验证与调试建议
- 打开浏览器开发者工具（F12），点击选中行，检查
元素是否同时拥有 mycolor 和父 的高亮类（如 .ui-state-highlight）； - 在 Computed Styles 面板中确认 background-color 和 color 的最终值是否来自 inherit 规则；
- 若使用自定义主题，请查阅 jqGrid 文档或源码，确认选中行实际添加的 CSS 类名（常见有 .jqgrow .selected, .ui-state-highlight, .active 等）。
通过此方案，你既保留了列级别的样式控制能力，又完全兼容 jqGrid 的行状态机制，实现专业、可维护的视觉统一性。
