动态编辑HTML表格单元格

Question

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

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

现在我想在单元格中显示颜色而不是数字。例如，如果数字为29673.4，则应该将该特定单元格填充为绿色，直到该单元格的29％，并且该单元格剩余的71％应该保留为白色。如果数字为90881.13333，则应该将特定单元格填充为绿色，直到该单元格的90％。

由于我对Stack Overflow还不太熟悉，因此无法添加屏幕截图。

希望您明白我的问题。

- user2798227

---

60个表格，每个表格只有3个单元格？我认为你在做反向操作。 - Blazemonger

“由于我是 Stack Overflow 的新用户，没有 10 分声望，因此无法添加截图。”请发布链接。 - j08691

这在我本地电脑上，所以我不能发布链接，目前我无法访问实时站点。 - user2798227

JSON文件有60个主机，每个主机都有3个GPU，因此有60个表格，每个表格有3个单元格。 - user2798227

Answer 1

如果您想在同一表格单元格中使用两种不同的颜色，请尝试分配CSS渐变。

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)+'%)');
});

(当前版本的jQuery在必要时也应该处理浏览器前缀的属性,。)

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

- Blazemonger

---

我有一个JSON文件，每次都会给出不同的值。 如果该值为29000，则我希望单元格垂直填充29%。 - user2798227

谢谢你提供的代码，我正在尝试将它应用到我的代码中并查看是否有效。 - user2798227

这真的非常有帮助。这个网站真的很好用，我试图弄清楚这个问题已经一个星期了。 我想投票支持你的答案，但是不能因为他们说我需要15个声望。 - user2798227