Editing the cell of html table dynamically

Question

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.

Answer 1

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/