jquery - 动态编辑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/