Question

我正在尝试在td的某个范围内创建动态背景颜色。此颜色必须基于td内的值。

例如：

<tr>
<td>40%</td>
<td>70%</td>
<td>30%</td>
</tr>

假设0％颜色为：＃ff0000，100％颜色为：＃00ff00

对于包含40％值的表格单元格，我希望背景颜色为＃ff0000和＃00ff00之间范围的40％。

这样，所有单元格都将根据它们包含的文本值自定义背景颜色。

任何线索？

Answer 1

Colorjizz library之类的声音可以帮助你。

http://code.google.com/p/colorjizz/

如何使用@Mikee的例子（见评论）：

$(function (){
    var colors = new Hex(0xFF0000).range(new Hex(0x00FF00), 100, true);
    $("table tr td:first-child").each(function (){
        $(this).parent().css({
        'background-color' : '#'+colors[parseInt($(this).text())].toString()
        });
    });
});

Answer 2

您需要做一些数学运算并使用Ecma- / Javascripts toString()来转换十六进制值。

var rgb = [255,0,0];

$(function(){
    $('td').each(function(i, elem){
       var $self     = $(elem),
           percent   = parseInt($self.text()),
           csscolor  = ['#'];

        rgb.forEach(function(value, index){
            this.temp = (~~((percent/100) * value)).toString(16);                
            csscolor.push(temp.length < 2 ? '0' + temp : temp);                
        });

        $self.css('background-color', csscolor.join(''));
    });
});

示例：http://www.jsfiddle.net/YjC6y/11/

这不是您问题的完整答案，但应该让您走上正确的道路。

Answer 3

在操作颜色时，RGB颜色空间不是下注选择。请查看以下文章：http://en.wikipedia.org/wiki/HSL_and_HSV。使用HSL色彩空间，您可以选择色相和饱和度，然后根据细胞内容调整亮度。

Answer 4

我有一个javascript解决方案

  ele=document.getElementById('tabid').getElementsByTagName('td');
  var cont;
  for(var i=0;i<ele.length;i++)
  {
   cont=ele[i].innerHTML.split('%');
   switch(cont[0])
   {
     case 10:
     ele[i].className='blue-color';
     break;
     ...

   }
  }

将表格ID设置为tabid， css blue-color{background:blue}

Answer 5

我有一个非常相似的需求，所以我继续把我在整个网络中找到的几个逻辑包装成一个jquery扩展。

使用可以像$（＆＃39; #myTable td＆＃39;）。color（）一样简单，或者如果您尝试遵循预定义的配色方案，则可以提供一系列颜色。

以下是基于＆lt; td＆gt;在两种指定颜色之间进行渐变的示例。文本值。

$(document).ready(function(){
    var myColors = [
        { rng: 0, to: 99, color: { r: 0xff, g: 0x00, b: 0x00 } },
        { rng: 100, to: 100, color: { r: 0x00, g: 0xff, b: 0x00 } }
    ];

    $('#myTable td').color({thresh: 110, colors: myColors});
});

JSFiddle：http://jsfiddle.net/danno2000/Yxm4G/

GitHub：https://github.com/danno2000/jquery-color

td上的动态背景色，基于文本值

5 个答案: