动态编辑html表格的单元格

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/