html表格单元格的条件格式

Question

是否有任何开箱即用的解决方案有条件格式的HTML表格？

使用条件格式化时，我更感兴趣的是将不同的颜色作为单元格背景，具体取决于该值或其他列的值（数字）（在同一个表中）。

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

是否有任何JavaScript / jquery或JSP解决方案？

Answer 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]);
                    }
                }
            });
       });

Answer 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。

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

Answer 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

Answer 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

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

Answer 5

我的做法类似于ZDYN和David所提出的，但是以更加数学证明的方式。

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

（L / N）×100 其中：L =>项目数减去计算百分位数的值 N =>项目总数

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

Answer 6

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