Dynamic background-color on td, based on text value

I am trying to create a dynamic background color in a certain range on a td. This color has to be based on the value that is inside the td.

For example:

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

Let's say the 0% color is: #ff0000 and the 100% color is: #00ff00

For the table cell containing the value of 40% I'd like the background color to be 40% of the range that is inbetween #ff0000 and #00ff00.

This way all the cel开发者_如何学Cls will have a custom background color based on the text value they contain.

Any clues?

---

Sound like the Colorjizz library would help you.

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

Example of how to use from @Mikee (see the comments):

$(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()
        });
    });​
});

---

You would need to do a little math and use Ecma-/Javascripts toString() to convert hex values.

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(''));
    });
});​

Example: http://www.jsfiddle.net/YjC6y/11/

This is not the complete answer to your question, but should send you on the right track.

---

The RGB color space is not the bets choice when it comes to manipulating colors. Check out the following article: http://en.wikipedia.org/wiki/HSL_and_HSV. With the HSL color space you could just pick a Hue and Saturation, then adjust the luminance according to the cells content.

---

i have a javascript solution

  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;
     ...

   }
  }

set table id as tabid and css blue-color{background:blue}

---

I had a very similar need so I went ahead and wrapped a couple of pieces of logic I found throughout the web into one jquery extension.

Usage can be as simple as $('#myTable td').color() or you can provide an array of colors if you're trying to follow a predefined color scheme.

Here is an example for gradiating between two specified colors based on the <td> text value.

$(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