【问题标题】：conditional formatting of html table cellshtml表格单元格的条件格式
【发布时间】：2011-07-01 07:31:46
【问题描述】：

是否有任何开箱即用的解决方案来对 HTML 表格进行条件格式设置？

对于条件格式，我更感兴趣的是根据该列或其他列（在同一个表中）的值（数字）将不同的颜色作为单元格背景。

类似于我们在 excel 条件格式 -> 色阶 -> 红黄绿中的内容。我想在通过 JSP 动态生成的表中实现它。

是否有任何 JavaScript/jquery 或 JSP 解决方案可以解决这个问题？

【问题讨论】：

您是否有您希望看到的值的示例标记？

标签： javascript html jquery-ui jsp html-table

【解决方案1】：

http://jsfiddle.net/stofke/Ya68Q/

      $(function() {
            $('tr > td:odd').each(function(index) {
                var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
                var score = $(this).text();
                for (var i = 0; i < scale.length; i++) {
                    if (score <= scale[i][1]) {
                        $(this).addClass(scale[i][0]);
                    }
                }
            });
       });

【讨论】：

最干净的解决方案。赞成！ :)

【解决方案2】：

鉴于以下表格结构，我首先对此进行了处理：

<table>
    <col id="name" />
    <col id="score" />
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Allan, Paul</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Bartlett, James</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Callow, Simon</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Dennis, Mark</td>
            <td>19</td>
        </tr>
        <tr>
            <td>Ennals, Simon</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Finnegan, Seamus</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

css:

table {
    width: 20em;
}

#score {
    width: 50%;
}

#name {
    width: 50%;
}

th {
    border-bottom: 2px solid #000;
    padding: 0.5em 0 0.1em 0;
    font-size: 1.2em;
}

td {
    border-bottom: 2px solid #ccc;
    padding: 0.5em 0 0.1em 0;
}

th:nth-child(even),
td:nth-child(even) {
    text-align: center;
}

.vGood {
    background-color: #0f0;
}

.good {
    background-color: #0c0;
}

.avg {
    background-color: #060;
}

.poor {
    background-color: #c00;
}

.vPoor {
    background-color: #f00;
}

和 jQuery：

$('tbody tr td:not(":first")').each(

function() {
    var vGood = 30,
        good = 25,
        avg = 20,
        poor = 15,
        vPoor = 10,
        score = $(this).text();

    if (score >= vGood) {
        $(this).addClass('vGood');
    }
    else if (score < vGood && score >= good) {
        $(this).addClass('good');
    }
    else if (score <good && score >= avg) {
        $(this).addClass('avg');
    }
    else if (score < avg&& score >= poor) {
        $(this).addClass('poor');
    }
    else if (score < poor) {
        $(this).addClass('vPoor');
    }
    });

JS Fiddle demo.

当然，这是一种蛮力方法。它会起作用，但它不是最优化/最有效的方法。

【讨论】：

【解决方案3】：

你可以设置一些 css 类：

.row { background-color: #00ff00; }
.alt { backgorund-color: #ff00ff; }

<table>
    <tr class="row">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
    <tr class="alt">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
</table>

jquery 选项也很简单，但这是我诚实的做法。

HTH

【讨论】：

请看我对 Stofke 的回复

【解决方案4】：

为表格中的最大值和最小值维护两个变量。

添加一个在表格更改时调用的函数。遍历每个单元格并根据需要重新计算最高和最低值，然后使用 if 语句（或类似的东西）重新分配正确的颜色。例如，对于每个单元格：

if(cellValue < minValue)
    minValue = cellValue;
else if(cellValue > maxValue)
    maxValue = cellValue;

var bracket = (cellValue - minValue) / (maxValue - minValue);

if(bracket < .2)
    // make the cell green
else if(bracket < .4)
    // make the cell green-yellow
else if(bracket < .6)
    // make the cell yellow

...等等。这是非常蛮力的。您或许可以找到一种方法来优化为现有单元格重新分配颜色的过程。

【讨论】：

【解决方案5】：

我已经完成了类似于 ZDYN 和 David 提出的建议，但采用了更加数学证明的方式。

计算完动态值后，我会计算要使用颜色代码的列的百分位数

(L/N)*100
其中：L=> 项目数减去计算百分位数的值
N => 项目总数

现在，根据我从上述计算中得到的百分位数，在显示表格时分配适当的颜色以供使用。
通过这种方法，我可以根据需要灵活地在不同粒度级别使用不同的调色板。
例如，我可以将红色用于百分位数，在一种情况下为 0-5，在另一种情况下为 0-10。所有这些部分都可以灵活编码，因为上述所有步骤都在@后端完成。（在 Java 中）

【讨论】：

【解决方案6】：

您可以使用 css 并在后端动态生成类名...所以在后端，您可以根据单元格的计算值添加 class="level1"（或 "level2" 或 "level3" 等） .然后你可以通过简单的 css 来控制这些类的显示。

【讨论】：