问

动态编辑html表格的单元格

哲玲旭辉9 发布于 2023-02-13 13:38

json

文件

html

overflow

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

有60个表,每个表有3个单元格,每个单元格都有一些值.

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

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

我希望你理解我的问题.

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/

2023-02-13 13:40 回答

赵翠123_797

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签