Business requirement background: when rendering the table, judge whether the current cell value is modifiable according to the data. If it is modifiable, set the background color of the current cell to yellow.

HTML code

<div class="emissionsCon">
				<h2 class="emissionsTitle">Data Reissue</h2>
				<table id="example" class="display emissionsTable table" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="checkAll" onchange="checkAll()"/>
							</th>
							<th>Two level unit</th>
							<th>Three level unit</th>
							<th>Crew</th>
							<th>Data time</th>
							<th>N Converted value</th>
							<th>S Converted value</th>
							<th>D Converted value</th>
							<th>Standard flow rate</th>
							<th>Oxygen content</th>
							<th>load</th>
						</tr>
					</thead>
				</table>
			</div>

JS code:

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"
			}
		]
	});

}

Let's talk about the code createdCell: function(nTd, sData, oData, iRow, iCol) {}

This callback method will be triggered when datatable creates cells, and the parameters correspond to

nTd current cell DOM object

sData current cell value

oData data object of the whole row of the current row

iRow line subscript

iCol column subscript