jQuery DataTables为不同单元格设置CSS样式失效问题求助

你当前代码的核心问题是操作了数据源数据而非DOM单元格：$('#results').DataTable().data()[j][i]返回的是表格的原始数据源（数组/对象格式），不是页面上的<td>元素，自然无法调用.css()方法修改样式。

修正方案 #

1. 缓存DataTable实例，避免重复调用初始化方法
2. 使用DataTables官方提供的cell(rowIndex, colIndex).node()方法，获取对应单元格的DOM元素
3. 修正索引逻辑（DataTables的行/列索引从0开始，原循环从1开始会跳过第一行/列）

修正后的代码 #

$('#results').DataTable({
    "initComplete": function(settings) {
        // 缓存DataTable实例，提升性能
        const dt = new $.fn.dataTable.Api(settings);
        const rowCount = dt.rows().count();
        const colCount = dt.columns().count();

        // 遍历目标列（根据需求调整起始列索引）
        for (let i = 1; i < colCount; i++) {
            // 遍历行，与上一行同列数据对比
            for (let j = 1; j < rowCount; j++) {
                const currentVal = dt.cell(j, i).data();
                const prevVal = dt.cell(j-1, i).data();
                
                if (currentVal !== prevVal) {
                    // 获取单元格DOM元素并设置样式
                    $(dt.cell(j, i).node()).css("color", "red");
                }
            }
        }
    }
});

额外优化建议 #

• 如果表格开启了分页、滚动等动态特性，建议把initComplete替换为drawCallback，确保每次表格重绘（比如切换分页）时都会重新应用样式
• 优先用CSS类替代行内样式，更易维护：
  1. 定义CSS类：.diff-cell { color: red; }
  2. 代码中替换为：$(dt.cell(j, i).node()).addClass('diff-cell')

内容的提问来源于stack exchange，提问作者Дмитрий