本文详解如何解决 jqgrid 中通过 `setcell` 设置的单元格内联样式（如背景色、文字色）在行被点击选中后不随高亮样式变化的问题，核心是利用 css 优先级与继承机制，使自定义单元格类在选中状态下正确继承 `.ui-state-highlight` 的样式。
在 jqGrid 中，我们常使用 setCell 方法为特定列（如 quarter1）动态设置背景色或文字颜色，例如：
$("#lstStudents").jqGrid("setCell", id, "quarter1", "", {
"background": "rgb(250, 250, 250)",
"color": "rgb(0, 0, 0)"
});但该方式直接写入
✅ 正确解法：放弃内联样式，改用 CSS 类 + 继承控制
第一步：定义语义化单元格类
在 CSS 中声明一个自定义类（如 mycolor），仅负责默认状态样式：
td.mycolor {
background-color: rgb(250, 250, 250) !important;
color: rgb(0, 0, 0) !important;
}⚠️ 注意：此处 !important 是为了确保它能覆盖 jqGrid 默认的 .ui-widget-content td 样式，但仅用于默认态。
第二步：用 setCell 应用该类（而非内联样式）
修改 JavaScript，将 "mycolor" 作为第 4 个参数传入（即 classes 参数）：
function onloadFunction(ids) {
const $grid = $("#lstStudents");
const rowIds = $grid.jqGrid("getDataIDs");
for (let i = 0; i < rowIds.length; i++) {
const rowId = rowIds[i];
$grid.jqGrid("setCell", rowId, "quarter1", "", "mycolor");
}
}第三步：强制高亮状态下继承父行样式
关键一步：覆盖选中行中该类单元格的样式，使其继承 .ui-state-highlight 的背景与文字色：
/* jqGrid 原生主题（jQuery UI） */
.ui-widget-content .ui-state-highlight > td.mycolor {
background-color: inherit !important;
color: inherit !important;
}
/* 若使用 Bootstrap 主题（如 Bootstrap 4/5），请根据实际高亮类名调整，例如： */
.table-success > td.mycolor,
.table-primary > td.mycolor {
background-color: inherit !important;
color: inherit !important;
}
总结
- ❌ 避免直接用 setCell 写内联样式（{background: ..., color: ...}），因其无法响应状态变化；
- ✅ 推荐方案：CSS 类 + setCell(..., ..., ..., "className") + 高亮上下文继承规则；
- ✅ 所有样式逻辑集中于 CSS，JavaScript 仅负责结构标记，更易维护、可复用；
- ✅ 同一列在不同主题（jQuery UI / Bootstrap）下只需切换对应的选择器，无需修改 JS。
这样即可实现：默认状态按需着色，点击选中时无缝融入高亮行视觉体系，兼顾灵活性与一致性。
