Datatables JS：基于数据值排名实现红绿灯式条件格式化

没问题！要给DataTables里的数值列做红绿灯样式的条件格式化，还能给不同数值设置略有差异的色调，用DataTables自带的回调函数就能轻松搞定。我给你准备了两种实用方案，适配3-30行的表格场景：

方案一：基于固定阈值的红绿灯格式化 #

适合你例子里明确知道阈值的场景（比如SCORE1≥100绿、80≤分数<100黄、<80红），还能给同色系的数值加轻微色调差异（比如用透明度区分）。

步骤1：HTML结构 #

先准备基础的表格结构：

<table id="scoreTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>NAME</th>
            <th>SCORE1</th>
            <th>SCORE2</th>
            <th>SCORE3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ken</td>
            <td>89</td>
            <td>56</td>
            <td>78</td>
        </tr>
        <tr>
            <td>Sue</td>
            <td>102</td>
            <td>34</td>
            <td>43</td>
        </tr>
        <tr>
            <td>Dave</td>
            <td>7</td>
            <td>200</td>
            <td>12</td>
        </tr>
        <!-- 可继续添加数据至30行 -->
    </tbody>
</table>

步骤2：DataTables初始化+条件格式化逻辑 #

用createdRow回调遍历每一行，判断数值后给单元格添加CSS类：

$(document).ready(function() {
    $('#scoreTable').DataTable({
        createdRow: function(row, data, dataIndex) {
            // 处理SCORE1列（索引为1）
            const score1 = parseInt(data[1]);
            const scoreCell = $(row).find('td:eq(1)');
            
            if (score1 >= 100) {
                // 绿色系：分数越高，透明度越高（颜色越实）
                const opacity = 0.7 + (score1 - 100)/50;
                scoreCell.addClass('green-score').css('opacity', Math.min(opacity, 1));
            } else if (score1 >= 80) {
                // 黄色系：分数越高，透明度越高
                const opacity = 0.7 + (score1 - 80)/20;
                scoreCell.addClass('yellow-score').css('opacity', Math.min(opacity, 1));
            } else {
                // 红色系：分数越低，透明度越高（颜色越实）
                const opacity = 0.7 + (80 - score1)/80;
                scoreCell.addClass('red-score').css('opacity', Math.min(opacity, 1));
            }

            // 若需处理SCORE2、SCORE3，复制上述逻辑修改列索引即可
        }
    });
});

步骤3：CSS样式定义 #

给不同类设置基础背景色：

.green-score {
    background-color: #2ecc71;
    color: white;
}
.yellow-score {
    background-color: #f39c12;
    color: white;
}
.red-score {
    background-color: #e74c3c;
    color: white;
}
/* 可选：优化单元格内边距，让样式更美观 */
#scoreTable td {
    padding: 8px 12px;
}

方案二：基于排名的动态渐变色调 #

如果你的数值范围不固定，想要自动根据排名从红到绿渐变（排名越高颜色越绿），可以用HSL颜色模式实现，3-30行的每个数值都会有细微的色调差异：

$(document).ready(function() {
    const table = $('#scoreTable').DataTable({
        initComplete: function(settings, json) {
            // 获取SCORE1列的所有数值并排序，计算排名区间
            const scoreData = this.api().column(1).data().map(val => parseInt(val)).toArray();
            const sortedScores = [...scoreData].sort((a,b) => b - a);
            const maxScore = sortedScores[0];
            const minScore = sortedScores[sortedScores.length - 1];
            
            // 遍历每一行设置渐变背景色
            this.api().rows().every(function() {
                const data = this.data();
                const score = parseInt(data[1]);
                // 计算数值在区间内的相对位置，映射到HSL色相（0=红，120=绿）
                const relativePos = (score - minScore)/(maxScore - minScore);
                const hue = 120 * relativePos;
                $(this.node()).find('td:eq(1)').css({
                    'background-color': `hsl(${hue}, 70%, 60%)`,
                    'color': 'white'
                });
            });
        }
    });
});

这个方案会自动适配所有数值，最高分显示纯绿色，最低分显示纯红色，中间分数按比例过渡为橙黄、黄绿等色调，完美适配3-30行的表格规模。

注意事项 #

1. 如果使用服务器端分页，要把格式化逻辑放到drawCallback中，因为initComplete仅在初始化时执行一次，分页后需要重新处理当前页的行。
2. 多列需要格式化时，可将逻辑封装成复用函数（比如formatScoreCell(cell, score, thresholds)），避免重复代码。
3. 色调差异的程度可以通过调整CSS的透明度、HSL的饱和度/亮度来微调，达到你想要的视觉效果。

内容的提问来源于stack exchange，提问作者user2096512