JQuery Coloring Book

Question

I have a table with each column with values ​​from -100 to +100. I want to color them with the whole element below zero to -100, going from white to dark red. and from zero to +100 with colors from white to dark green.

Any suggestion on how I can brew use colors using jQuery?

I am having problems with selectors .. it’s better if I can just execute the given css background via jquery

Thanks.

Answer 1

Using a function that can calculate the color component at a point between two values, you can use the rgb(r,g,b) color syntax in CSS to set the background color:

 function morph(start, stop, point) { return Math.round(stop - start) * point / 100 + start); } $('td').each(function(){ var value = parseInt($(this).text()); var color; if (value < 0) { color = morph(255,100,-value) + ',' + morph(255,0,-value) + ',' + morph(255,0,-value); } else { color = morph(255,0,value) + ',' + morph(255,50,value) + ',' + morph(255,0,value); } $(this).css('background-color', 'rgb(' + color + ')'); }); 

Answer 2

Can I offer my own jQuery plugin?

jQuery Hottie simplifies the usual layout and adds a background color as follows:

 <table id="myTable"> <tr><td>-100</td><td>50</td><td>-30</td></tr> <tr><td>100</td><td>0</td><td>-30</td></tr> <tr><td>750</td><td>-50</td><td>40</td></tr> </table> 

And in JS:

 $("#myTable td").hottie({ colorArray : [ "#F8696B", // highest value "#FFFFFF", "#63BE7B" // lowest value // add as many colors as you like... ] }); 

Results:

Watch this live JSFiddle example

Answer 3

You might want to use the HeatColor jQuery plugin. However, be warned that the exact color sequence you want may not be available.

A good rental car of your own can be found at designchemical.com.