根据值更改表格单元格的颜色 [英] Change colour of table cells depending on value

问题描述

我正在使用jQuery编辑表格单元格的 background-color 。我的代码如下（每​​个单元格的数字格式为x / y，所以我在开始时将它们挖出）：

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);
                }
            });
        });

现在，当我点击每个单独的单元格时，这是有效的，但我想为所有单元格着色在 $（文件）.ready（）。我认为 .each（）方法可能正是我正在寻找的，但我无法弄清楚如何让它正常工作......

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!

推荐答案

感谢Nunners，有标题值这破坏了代码。我使用以下if块修复了它：

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
}

这篇关于根据值更改表格单元格的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！