如何把表格做成热点图

第一次写博客，因为刚开始出来工作实习，老大布置了几个小任务，可自己完全是小白一只，遇到了很多问题，一直在到处请教同学帮忙，上网查资料。决定把这些问题是怎么解决的记录下来以供自己后面学习。
问题描述1：一张数字表格数字越大颜色越深，然后数字比它小的颜色也变浅，能过一眼看出数字大的分布在哪里
我的思路就是首先要找到表格里的最大数，下面是我的代码

var max=document.getElementById("example").rows[2].cells[1].innerHTML;
     var mytable = document.getElementById("example");

        for(var i=2;ifor(var j=1;jvar b=mytable.rows[i].cells[j].innerHTML;
             if(b>max){
                 max=b;
                 }
            }

        }

可是出来的结果始终不是最大数，但是我觉得自己的逻辑没有问题啊，一直找不到原因，后来问了一个同学才发现问题，下面是正确的代码：

var max=document.getElementById("example").rows[2].cells[1].innerHTML;
     var mytable = document.getElementById("example");

        for(var i=2;ifor(var j=1;jvar b=Number(mytable.rows[i].cells[j].innerHTML);
            if(b==null||b==''){
                continue;
                }
             if(b>max){
                 max=b;
                 }
            }

        }

现在找到最大数了，然后就是给每个单元格添加样式，用rgba添加背景色，改变a的值，a的值等于当前单元格的值除以最大值，下面是代码：

for(var i=2;ifor(var j=1;jvar b=Number(mytable.rows[i].cells[j].innerHTML);
                mytable.rows[i].cells[j].style.background=('rgba(155,59,51,' + ((b) ? (b/max) : '0.1') + ')');
            }

        }

这样就把表格做成热点图了，下面是完整的代码

 $(document).ready(function ()
{   var max=document.getElementById("example").rows[2].cells[1].innerHTML;
     var mytable = document.getElementById("example");

        for(var i=2;ifor(var j=1;jvar b=Number(mytable.rows[i].cells[j].innerHTML);
            if(b==null||b==''){
                continue;
                }
             if(b>max){
                 max=b;
                 }
            }

        }
        for(var i=2;ifor(var j=1;jvar b=Number(mytable.rows[i].cells[j].innerHTML);
                mytable.rows[i].cells[j].style.background=('rgba(155,59,51,' + ((b) ? (b/max) : '0.1') + ')');
            }

        }

});

效果图