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

【问题标题】：Change Cell CSS Datatables based on content根据内容更改单元格 CSS 数据表
【发布时间】：2019-01-10 20:19:20
【问题描述】：

在 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,                            
});

【问题讨论】：

标签： jquery regex datatables

【解决方案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>

【讨论】：

太棒了！非常感谢！

【解决方案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");
    }
  });

【讨论】：