datatable 在渲染表格时，对单元格进行单独设置样式

最新推荐文章于 2025-06-06 09:01:30 发布

淡看亽甡粨態

最新推荐文章于 2025-06-06 09:01:30 发布

阅读量9.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS DataTable

本文链接：https://blog.youkuaiyun.com/DanKanHu/article/details/82377873

JS 同时被 2 个专栏收录

2 篇文章

订阅专栏

DataTable

1 篇文章

订阅专栏

本文介绍如何在渲染表格时根据数据判断并标记可编辑的单元格，通过设置背景颜色来直观显示哪些单元格允许修改。使用了HTML、CSS和JavaScript技术实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求背景：在渲染表格时，根据数据判断当前单元格值是否为可修改，可修改就设置当前单元格的背景颜色为黄色。

HTML代码

<div class="emissionsCon">
				<h2 class="emissionsTitle">数据补发</h2>
				<table id="example" class="display emissionsTable table" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="checkAll" onchange="checkAll()"/>
							</th>
							<th>二级单位</th>
							<th>三级单位</th>
							<th>机组</th>
							<th>数据时间</th>
							<th>N折算值</th>
							<th>S折算值</th>
							<th>D折算值</th>
							<th>标流量</th>
							<th>氧量</th>
							<th>负荷</th>
						</tr>
					</thead>
				</table>
			</div>

JS代码：


function dataTableInit() {
	table = $('#example').DataTable({
		"scrollY": "100%",
		"scrollX": "100%",
		"bLengthChange": false,
		"aLengthMenu": [15],
		"ordering": false,
		"info": false,
		"searching": false,
		"fixedColumns": {
			"leftColumns": 1,
		},
		"language": {
			url: "../../../build/datatables/i18n/Chinese.json"
		},
		"ajax": {
			type: "POST",
			crossDomain: true,
			async: true,
			contentType: "application/json",
			url: baseUrl + "/ecoFillMakeup/queryData",
			data: function(d) {
				return getQueryCondition();
			},
			dataSrc: function(data) {
				if(data.code != 200) {
					return new Array();
				}
				valueData = data.data;
				for(var i in valueData) {
					valueData[i].dataTime = fmtDate(valueData[i].dataTime);
				}
				return valueData;
			}
		},
		"columns": [{
				className: "td-checkbox",
				orderable: false,
				bSortable: false,
				data: "idKey",
				width: '30px',
				render: function(data, type, row, meta) {
					var content = '<input type="checkbox" class="group-checkable" value="' + data + '" />';
					return content;
				}
			},
			{
				"data": "comName"
			},
			{
				"data": "orgName"
			},
			{
				"data": "unitName"
			},
			{
				"data": "dataTime"
			},
			{
				"data": "nConverted",
				createdCell: function(nTd, sData, oData, iRow, iCol) {
					if(oData.nMakeup == 1 && null == sData) {
						$(nTd).css("background-color", "#FFFF00");
					}
				}
			},
			{
				"data": "sConverted",
				createdCell: function(nTd, sData, oData, iRow, iCol) {
					if(oData.sMakeup == 1 && null == sData) {
						$(nTd).css("background-color", "#FFFF00");
					}
				}
			},
			{
				"data": "dConverted",
				createdCell: function(nTd, sData, oData, iRow, iCol) {
					if(oData.dMakeup == 1 && null == sData) {
						$(nTd).css("background-color", "#FFFF00");
					}
				}
			},
			{
				"data": "fGasFlow",
				createdCell: function(nTd, sData, oData, iRow, iCol) {
					if(oData.fGasFlowMakeup == 1 && null == sData) {
						$(nTd).css("background-color", "#FFFF00");
					}
				}
			},
			{
				"data": "oxyn",
				createdCell: function(nTd, sData, oData, iRow, iCol) {
					if(oData.oxynMakeup == 1 && null == sData) {
						$(nTd).css("background-color", "#FFFF00");
					}
				}
			},
			{
				"data": "load",
				createdCell: function(nTd, sData, oData, iRow, iCol) {
					if(oData.loadMakeup == 1 && null == sData) {
						$(nTd).css("background-color", "#FFFF00");
					}
				}
			},
			{
				"visible": false,
				"data": "nMakeup"
			},
			{
				"visible": false,
				"data": "sMakeup"
			},
			{
				"visible": false,
				"data": "dMakeup"
			},
			{
				"visible": false,
				"data": "fGasFlowMakeup"
			},
			{
				"visible": false,
				"data": "oxynMakeup",
			},
			{
				"visible": false,
				"data": "loadMakeup"
			}
		]
	});

}

单独谈谈createdCell ： function(nTd, sData, oData, iRow, iCol){} 这段代码

该回调方法会在datatable 创建单元格时触发，参数分别对应

nTd 当前单元格DOM对象

sData 当前单元格数值

oData 当前行整行的数据对象

iRow 行下标

iCol 列下标