jquery - 根据值更改表格单元格的颜色

Question

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

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

现在，当我单击每个单独的单元格时，这可以工作，但我想为所有单元格上色$(document).ready()。我认为该.each()方法可能是我正在寻找的，但我无法弄清楚如何使其正常工作......

任何帮助将不胜感激！

Answer 1

正如 Jason P 提到的，以下代码应该可以正常工作：

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

.each 方法只是对检索到的对象的简单迭代。

Answer 2

感谢 Nunners，有一些标头值破坏了代码。我已经使用以下 if 块修复了它：

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

Answer 3

只需触发点击事件：

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