Change colour of table cells depending on value

Question

I'm using jQuery to edit the background-color of table cells. My code is as follows (the each cell has numbers in the format "x/y" so I mine them out at the start):

        $(document).ready(function(){
            $("#overview td").click(function(event){

                var content = $(this).html();
                var vals = content.split("/");
                var ratio = vals[0]/vals[1];
                alert(ratio);


                var red;
                var green;

                if(vals[1] == 0){
                    $(this).css('background-color', '#00FF00');
                } else{
                    if(ratio > 0.5){
                        red = 255;
                        green = parseInt(-2*255*ratio+(2*255));
                    } else{
                        green = 255;
                        red = parseInt(2*255*ratio);
                    }   
                    var rgbColor = 'rgb(' + red + ',' + green+ ', 0)';
                    var hexColor = rgb2hex(rgbColor);
                    $(this).css('background-color', hexColor);
                }
            });
        });

Now this works when I click on each individual cell, but I would like to colour all of the cells on $(document).ready(). I think the .each() method may be what I'm looking for, but I can't figure out how to make it work properly...

Any help would be greatly appreciated!

You should be able to simply replace the word `click` with the word `each`, and probably want to remove the `event` parameter. — Jason P, Sep 24 '13 at 21:29
This doesn't work, I think `this` is required to get the values out and tell it which cell to change? Also, thanks for noticing `event`, it was a leftover from a previous attempt :) — ms813, Sep 24 '13 at 21:52
I think you may be getting slightly confused with the `event` object and the `this` object, the `event` object is passed by the mouse being clicked, the this object is the current target object, in this case the `this` is the cell you are currently iterating over. — Nunners, Sep 24 '13 at 21:56

score 1 · Answer 1 · answered Sep 24 '13 at 21:41

Just as Jason P mentioned the following code should work fine :

        $(document).ready(function () {
            $("#overview td").each(function () {

                var content = $(this).html();
                var vals = content.split("/");
                var ratio = vals[0] / vals[1];
                alert(ratio);


                var red;
                var green;

                if (vals[1] == 0) {
                    $(this).css('background-color', '#00FF00');
                } else {
                    if (ratio > 0.5) {
                        red = 255;
                        green = parseInt(-2 * 255 * ratio + (2 * 255));
                    } else {
                        green = 255;
                        red = parseInt(2 * 255 * ratio);
                    }
                    var rgbColor = 'rgb(' + red + ',' + green + ', 0)';
                    var hexColor = rgb2hex(rgbColor);
                    $(this).css('background-color', hexColor);
                }
            });
        });

The .each method is just simply an iteration over the retrieved objects.

Unfortunately if I try this, the `alert(ratio);` line returns NaN and no colours are changed! — ms813, Sep 24 '13 at 21:48
Could you supply your HTML for the table you are attempting this on? If the value is returned as NaN then one of your values (vals[0] or vals[1]) is not a numeric number. You could try checking for this and handling the error using if statements or a try catch block. — Nunners, Sep 24 '13 at 21:54

score 1 · Accepted Answer · answered Sep 24 '13 at 22:03

1

Thanks Nunners, there were header values that broke the code. I've fixed it using the following if block:

if(vals[1] == undefined){
    return true;
} else{
    //change colour
}

answered Sep 24 '13 at 22:03

ms813

241
3
17

score 0 · Answer 3 · answered Sep 24 '13 at 21:37

0

Just trigger click event:

$(document).ready(function() {
    $("#overview td").click(function (event) {
        // ...
    })
    .trigger('click');
});

answered Sep 24 '13 at 21:37

dfsq

191,768
25
236
258

this also returns `ratio == NaN`, as `this` is required to get the values out I think? – ms813 Sep 24 '13 at 21:50
It means that some of your cells does not have appropriate data ( `content = $(this).html()`). – dfsq Sep 24 '13 at 21:53

Change colour of table cells depending on value

3 Answers3

Linked