时间戳

首页 > 解决方案 > 根据内容更改单元格 CSS 数据表

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

问题描述

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

标签： jqueryregexdatatables

解决方案

您可以使用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>

推荐阅读