基於文本值的td上的動態背景顏色

我想在td上的某個範圍內創建動態背景顏色。這種顏色必須基於td內的值。基於文本值的td上的動態背景顏色

例如：

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

比方說，0％的顏色是：＃FF0000和100％的顏色是：＃00FF00

對於含有的40％的值I會表格單元像背景顏色是＃ff0000和＃00ff00之間的範圍的40％。

這樣，所有的單元格將根據它們包含的文本值具有自定義背景顏色。

任何線索？

來源

2010-10-12 Ilium

聽起來像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() 
     }); 
    }); 
});

來源

2010-10-12 13:24:33

作爲ColorJizz的作者，我支持這個答案！ :)讓你做這樣的事情：新的RGB（255,0,0）.range（新的十六進制（0x00FF00），10，真）; – Mikee 2010-10-12 13:27:32

事實上，我舉了個例子：http：//www.jsfiddle。net/gCDn7/1/ – Mikee 2010-10-12 13:38:22

很好的例子，Mikee。 +1 – 2010-10-12 13:42:44

RGB顏色空間不是投注選擇，當涉及到操縱顏色。看看下面的文章：http://en.wikipedia.org/wiki/HSL_and_HSV。使用HSL色彩空間，您可以選擇色調和飽和度，然後根據單元格內容調整亮度。

來源

2010-10-12 13:27:56

你需要做一點數學計算，並使用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/

這不是完整的回答你的問題，而是應該送你在正確的軌道上。

來源

2010-10-12 13:27:59 jAndy

任何使底色爲白色的方法？謝謝 – Abram 2015-03-01 04:21:46

我有一個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和CSSblue-color{background:blue}

來源

2010-10-12 13:31:47 ArK

我有一個非常類似的需求，所以我說幹就幹，包裹一對夫婦的邏輯塊，我發現在整個網絡中進入一個jQuery擴展。用法可以像$（'＃myTable td'）。color（）一樣簡單，或者如果您試圖遵循預定義的顏色方案，則可以提供一組顏色數組。

以下是基於<td>文本值在兩種指定顏色之間放樣的示例。

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

來源

2014-05-18 18:59:19 danno2000

請使用與問題相關的小代碼示例編輯您的問題。 – Xan 2014-05-18 19:18:06

基於文本值的td上的動態背景顏色

回答

相關問題