Question

我有一个JSON文件，我从中提取数据并将其显示在html表中。

有60个表，每个表有3个单元格，每个单元格都有一些值。

现在我想在单元格中显示颜色而不是数字。因此，如果数字是29673.4，那么它应该用绿色填充那个特定的单元格，直到该单元格的29％，并且剩余的71％的单元格应该留下白色，如果数字是90881.13333那么它应该填充特定的绿色的细胞直到该细胞的90％。

它不允许我添加屏幕截图，因为我是Stack Overflow的新手，并且没有10个声誉。

我希望你理解我的问题。

Answer 1

如果要在同一个表格单元格中使用两种不同的颜色，请尝试指定CSS gradient。

background: linear-gradient(to bottom, #ffffff 71%, #50aa50 72%); 
/* very little transition with 1% difference */

您可以编写一个jQuery函数，自动为这些单元格着色：

$('selector').each(function() {
    var v = 100 - ($(this).text() / 1000); // since we're coloring top-to-bottom
    $(this).css('background','linear-gradient(to bottom ,#ffffff '+v+'%, #50aa50 '+(v+1)+'%)');
});

（Current versions of jQuery should handle browser prefixing for this attribute as well，必要时。）

http://jsfiddle.net/mblase75/NQCF8/

动态编辑html表格的单元格

1 个答案: