根据内容更改单元格 CSS 数据表

var tableHeaders = '<td>name</td><td>zipcode</td><td>country</td><td>telephone</td>';
var json = {data: [
    [ "name1", "zipcode1", "country1", "telephone1"],
    [ "name2", "zipcode2", "country2(!)", "telephone2"],
    [ "name3", "zipcode3(!!)", "country3", "telephone3(!!)"]]};
$("#tableDiv").empty();
$("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');
$('#displayTable').dataTable({
    "data": json.data,
    "pageLength": 200,
    "createdRow": function( row, data, dataIndex ) {
        data.forEach(function(ele, idx) {
            var i = ele.indexOf('(!!)');
            if (i > -1) {
                row.querySelectorAll('td')[idx].classList.add('red');
            } else {
                i = ele.indexOf('(!)')
                if (i > -1) {
                    row.querySelectorAll('td')[idx].classList.add('yellow');
                }
            }
        });
    }
});

.yellow {
    background-color: yellow;
}
.red {
    background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<div id="tableDiv">
</div>