Изменение таблиц данных CSS для ячеек на основе содержимого

Question

в jQuery Datatables. Я хочу сделать проверку данных AJAX видимой при разборе данных Excel.

При генерации данных в PHP я добавляю (!) Для предупреждения или (!!) для ошибки к значениям в моей динамической таблице (как столбцы, так и строки).

После загрузки таблицы я хочу изменить цвет фона этих ячеек, когда данные ячейки содержат (!) Или (!!).

Кто-нибудь понял, как это исправить? Перебирая все данные ячейки и настраивая цвет фона ячейки для предупреждений (оранжевый) об ошибках (красный).

Я попробовал fnRowCallBack, но не могу понять, как проверить, содержат ли данные ячейки (!) Или (!!). Может быть, с помощью Regex?

Любая помощь должна быть по достоинству оценена,

Цель:

$("#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

Вы можете использовать createRow обратный вызов:

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

Вы можете перебирать каждый тд в своей таблице и читать содержимое тд тэга, чтобы проверить, содержит ли он (!) Или (!!), и соответственно изменить цвет фона этого тд. Это базовая реализация. Это может быть улучшено в дальнейшем для повышения производительности, но оно поможет вам удовлетворить ваши требования

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