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

Question

在jQuery Datatables中，我想在解析Excel数据时使对AJAX数据的验证可见。

在PHP中生成数据时，我向动态（列和行）表中的值添加（！）警告或（!!）错误。

一旦加载了表格，当单元格数据包含（！）或（!!）时，我想更改这些单元格的背景颜色。

有人知道如何解决此问题吗？遍历所有单元格数据并调整错误（红色）警告（橙色）的单元格背景颜色。

我尝试了fnRowCallBack，但无法弄清楚如何验证单元格数据是否包含（！）或（!!）。也许使用正则表达式？

任何帮助都应得到感激，

目标：

$("#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,                            
});

Answer 1

您可以使用createdRow回调：

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>

Answer 2

您可以遍历表中的每个td并读取td标签的内容以检查是否包含（！）或（!!），并相应地更改该td的背景颜色。这是基本的实现。可以进一步改善以获得更好的性能，但是它将满足您的要求

 $("#tableId tbody tr td").each(function() {
    if($(this).html().indexOf("(!)") !== -1) {
      $(this).css("background-color","orange");
    } else if($(this).html().indexOf("(!!)") !== -1) {
      $(this).css("background-color","red");
    }
  });