如何把表格做成热点图
来源:互联网 发布:tensorflow cuda9.0 编辑:程序博客网 时间:2024/03/29 18:03
第一次写博客,因为刚开始出来工作实习,老大布置了几个小任务,可自己完全是小白一只,遇到了很多问题,一直在到处请教同学帮忙,上网查资料。决定把这些问题是怎么解决的记录下来以供自己后面学习。
问题描述1:一张数字表格数字越大颜色越深,然后数字比它小的颜色也变浅,能过一眼看出数字大的分布在哪里
我的思路就是首先要找到表格里的最大数,下面是我的代码
var max=document.getElementById("example").rows[2].cells[1].innerHTML; var mytable = document.getElementById("example"); for(var i=2;i<mytable.rows.length;i++){ for(var j=1;j<mytable.rows[i].cells.length;j++){ var 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;i<mytable.rows.length;i++){ for(var j=1;j<mytable.rows[i].cells.length;j++){ var 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;i<mytable.rows.length;i++){ for(var j=1;j<mytable.rows[i].cells.length;j++){ var 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;i<mytable.rows.length;i++){ for(var j=1;j<mytable.rows[i].cells.length;j++){ var b=Number(mytable.rows[i].cells[j].innerHTML); if(b==null||b==''){ continue; } if(b>max){ max=b; } } } for(var i=2;i<mytable.rows.length;i++){ for(var j=1;j<mytable.rows[i].cells.length;j++){ var b=Number(mytable.rows[i].cells[j].innerHTML); mytable.rows[i].cells[j].style.background=('rgba(155,59,51,' + ((b) ? (b/max) : '0.1') + ')'); } }});
效果图
2 0
- 如何把表格做成热点图
- 如何把自己的笔记本做成一个wifi热点共享网络
- 如何把EXE文件做成windows服务
- 如何能把垃圾网站做成专业网站
- 如何把自己做好的系统做成一个安装软件
- PS如何把图片做成圆角的
- 如何把一张照片用 Photoshop 做成动画背景效果?
- C#如何把可执行程序做成windows服务
- 如何把JAVA程序做成Windows服务,并开机运行
- 用PS如何把图片做成圆角的?
- 如何把淘抢购做成JSON接口(一)
- 如何把淘抢购做成JSON接口(二)
- 把PC做成CEPC
- 把uTorrent做成绿色版
- 把java做成绿色软件
- 把图标做成字体
- 前端切图,把psd文件做成一个网页
- 把视频中的一小段做成GIF动图
- iOS开发之高效绘图,通过一个绘图应用进行讲解
- Qt 路径操作(代码)
- eclipse插件开发收集资料
- 科研中您做的内容有用吗?
- iOS 视频播放之MPMoviePlayerController
- 如何把表格做成热点图
- fullpage学习笔记
- Python.androguard -- 安卓的逆向分析工具
- 获取 IDFA 标示当设备唯一识别, 并保存到 KeyChain 中
- 161008数组的创建与使用
- 64 位系统 vs2013 配置 OpenCV-3.1.0
- 计算百度地图2点间的距离
- 基于jquery 和 FormData 最简单图片异步上传
- qt XML中的HTML节点,转换为html格式的字符串