我正在使用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()
方法可能正是我想要的,但我无法弄清楚如何让它正常工作......
非常感谢任何帮助!
答案 0 :(得分: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方法只是对检索到的对象的迭代。
答案 1 :(得分:1)
感谢Nunners,有一些标题值破坏了代码。我使用以下if块修复了它:
if(vals[1] == undefined){
return true;
} else{
//change colour
}
答案 2 :(得分:0)
只需触发点击事件:
$(document).ready(function() {
$("#overview td").click(function (event) {
// ...
})
.trigger('click');
});