3

I have a JSON file and I have extracted data from it and displayed it into the html tables.

There are 60 tables, each has 3 cells and each cell has some value.

Now I want to display colours in the cells instead of numbers. So suppose if the number is 29673.4, then it should fill that particular cell with Green colour till 29% of that cell, and remaining 71% of the cell should be left with white colour, if the number is 90881.13333 then it should fill the particular cell with Green colour till 90% of that cell.

It is not allowing me to add screenshot as I am new to Stack Overflow and doesn't have 10 reputations.

I hope you understood my question.

user2798227
  • 853
  • 1
  • 16
  • 31

1 Answers1

5

If you want to use two different colors in the same table cell, try assigning a CSS gradient.

background: linear-gradient(to bottom, #ffffff 71%, #50aa50 72%); 
/* very little transition with 1% difference */

You can write a jQuery function that will color these cells automatically:

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

(Current versions of jQuery should handle browser prefixing for this attribute as well, when necessary.)

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

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • No I have a JSON file and it gives different values each time. I want the cell to be fill up 29% vertically if the value is 29000. – user2798227 Dec 02 '13 at 15:56
  • Thanks for the code, I am trying to use it in my code and see if it works. – user2798227 Dec 02 '13 at 16:08
  • This was really really helpful. This site really works, I was trying to figure out this for 1 week. I want to vote up your answer but can't cuz they said I need 15 reputations. – user2798227 Dec 02 '13 at 16:21