jqGrid设置表格列的背景色

最新推荐文章于 2021-06-17 20:28:28 发布

YangzaiBob

最新推荐文章于 2021-06-17 20:28:28 发布

阅读量2.9k

点赞数

分类专栏： Js前端 jqGrid

本文链接：https://blog.csdn.net/u011047145/article/details/116013318

版权

Js前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jqGrid

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端表格中使用JavaScript设置单元格文字颜色和背景色，以及在loadComplete方法中动态改变特定列的背景色。实例展示了通过colModel配置字体颜色和使用延迟操作设置tbody中特定td背景色的方法。

摘要由CSDN通过智能技术生成

效果
在这里插入图片描述

1、设置某一列单元格文字颜色和背景色。
位置：在colModel的label属性：

 {label:'英文简称', name:'domainSimpEng', index:'domainSimpEng', width:'17%',     align:'left',formatter:function(cellValue,option,rowObj){
 return "<font color='blue' style = 'background-color:#FF9797'>"+rowObj.domainSimpEng+"</font>";
               }}

2、设置某一列单元格背景色。
位置：在loadComplete方法内加

		loadComplete: function() {
			var table = this;
			setTimeout(function(){
				updatePagerIcons(table);
			}, 0);
			//获取表格id子元素tbody下的tr对象集合
			var trCell1 = $("#grid-table").children("tbody").find("tr");
			//tr对象集合找到第3列的td，设成指定颜色
			for(var i = 1 ; i < trCell1.length;i++){//i从1开始调过表格头部的tr
	         $("#grid-table").children("tbody").children("tr").eq(i).find("td")[3].style.background="#09ee05";//3为指定的表格的第3列设定颜色
			}
		},