我正在为基于一些简单阈值的一些结果创建热图。我正在使用 JavaScript 创建、设置值和背景颜色。预期的结果是使用一些blue
不同色调的热图。但是,没有任何内容被着色,通过分析 DOM 我发现:
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
因此,bgcolor="#"
未设置。我都使用了bgcolor
and setAtribute
,但结果是一样的:没有任何东西被着色。我的功能贴在下面:
function makeTable(data)
{
var row = new Array();
var cell = new Array();
var row_num = 26;
var cell_num = 44;
var tab = document.createElement('table');
tab.setAttribute('id', 'newtable');
tab.border = '1px';
var tbo = document.createElement('tbody');
for(var i = 0; i < row_num; i++){
row[i] = document.createElement('tr');
var upper = (i+1)*44;
var lower = i*44;
for(var j = lower; j < upper; j++){
cell[j] = document.createElement('td');
if(data[j] != undefined){
var index = document.createTextNode(data[j].diff);
cell[j].appendChild(index);
/* specify which color better suits the heatmap */
if(index >= 0 || index <= 100){
cell[j].bgcolor = "#ADDDE6";
}
else if(index > 100 || index <= 1000){
cell[j].bgcolor = "#00BFFF";
}
else if(index > 1000 || index <= 4000){
cell[j].bgcolor = "#6495ED";
}
else if(index > 4000 || index <= 6000){
cell[j].bgcolor = "#00008B";
}
else{
cell[j].bgcolor = "#0000FF";
}
row[i].appendChild(cell[j]);
}
}
tbo.appendChild(row[i]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
有任何想法吗?谢谢