如何动态创建一个表格色阶图

这里以红色系列为例（红色rgb(255,0,0)）：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script type="text/javascript">window.onload=function(){showColor();}//显示背景色阶值function showColor(){var valueList =[];//用来存放数值
      $("td").each(function(){var _self = $(this);var value = _self.text();//获取数值集合(不重复)if($.inArray(value,valueList) == -1){valueList.push(value);}});//获取表格中最大值与最小值的差值var minValue = Math.min.apply(null,valueList),maxValue = Math.max.apply(null,valueList),dValue = maxValue - minValue;$("td").each(function(){var _self = $(this);var value = _self.text();var a = 255,b = 255 - Math.round((255/dValue)*(value-minValue));var rgb = "rgb("+a+","+b+","+b+")";//填充颜色
        _self.css('background-color', rgb);});   }</script></head><body><h1 align="center">色阶图</h1><table border="1" align="center"><thead><th><h2>一</h2></th><th><h2>二</h2></th><th><h2>三</h2></th><th><h2>四</h2></th><th><h2>五</h2></th><th><h2>六</h2></th></thead><tbody><tr><td>1</td><td>56</td><td>15</td><td>2</td><td>35</td><td>26</td></tr><tr><td>2</td><td>35</td><td>26</td><td>3</td><td>98</td><td>24</td></tr><tr><td>3</td><td>98</td><td>24</td><td>3</td><td>98</td><td>24</td></tr><tr><td>4</td><td>75</td><td>35</td><td>60</td><td>88</td><td>30</td></tr><tr><td>5</td><td>12</td><td>18</td><td>4</td><td>75</td><td>35</td></tr><tr><td>60</td><td>88</td><td>30</td><td>60</td><td>45</td><td>30</td></tr><tr><td>4</td><td>75</td><td>35</td><td>60</td><td>24</td><td>30</td></tr><tr><td>51</td><td>42</td><td>9</td><td>60</td><td>88</td><td>30</td></tr></tbody></table></body>
</html>
<body></body>
</html>

生成效果如下：

思路：1.遍历表格（除表头）每一列；

　　　2.用一个数组存放表格里所有的数值；

　　 3.得出最大与最小值，计算出差值；

　　 4.写一个计算方式，控制a,b,c不要超过255；

　　 5.填充表格。

如果要动态生成表格，并自动填充表格，那么可以这样写：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script type="text/javascript">window.onload=function(){createTable(8, 10);showColor();}//动态创建表格function createTable(rowCount, cellCount) {var table = $('table');for (var i = 0; i < rowCount; i++) {var tr = $('<tr></tr>');table.append(tr);for (var j = 0; j < cellCount; j++) {var td = $('<td>' + randomNum(0, 100) + '</td>');tr.append(td);}}}//生成随机数function randomNum(minNum,maxNum){ switch(arguments.length){ case 1: //生成（1，minNum）之间的整数return parseInt(Math.random()*minNum+1); break; case 2: //生成（minNum，maxNum）之间的整数return parseInt(Math.random()*(maxNum-minNum+1)+minNum);break; default: return 0; break; }
} //显示背景色阶值function showColor(){var valueList =[];//用来存放数值
      $("td").each(function(){var _self = $(this);var value = _self.text();//获取数值集合(不重复)if($.inArray(value,valueList) == -1){valueList.push(value);}});//获取表格中最大值与最小值的差值var minValue = Math.min.apply(null,valueList),maxValue = Math.max.apply(null,valueList),dValue = maxValue - minValue;$("td").each(function(){var _self = $(this);var value = _self.text();var a = 255,b = 255 - Math.round((255/dValue)*(value-minValue));var rgb = "rgb("+a+","+b+","+b+")";//填充颜色
        _self.css('background-color', rgb);});   }</script></head><body><h2 align="center">色阶图</h2><table border='1' align="center"></table></body>
</html>

效果如下：

要点：1.createTable(rowCount, cellCount)：创建一个指定行列的表格；2.randomNum(minNum,maxNum):生成(minNum,maxNum)之间的随机数。

转载于:https://www.cnblogs.com/lingluo2017/p/6794681.html

如何动态创建一个表格色阶图相关推荐

java预览表格预览文档_java 如何创建一个表格.docx
java 如何创建一个表格 import java.awt.Component; import java.awt.event.ActionEvent; import java.awt.event.Ac ...
点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作
点击按钮创建一个表格 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
php 细表格,使用PHP轻松地创建一个表格 - 小俊学习网
这是PHP基础的一部分,PHP可以和HTML嵌套书写,这是一个小巧的可以创建一个表格的PHP代码.这里是书写成一个PHP函数.调用函数来使用. 1.创建画表格的PHP函数 $rows = 10; // ...
js的节点操作动态创建table表格，创建行，删除行
节点操作根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性 ...
MFC小程序003------MFC使用WebBrowser组件，在对话框中创建滚动视图，动态创建一个静态文本控件并设置鼠标单击的消息响应...
MFC小程序截图: 一.在MFC中简单使用WebBrowser的ActiveX插件的方法: 见博文: http://blog.csdn.net/supermanking/article/detail ...
用JSP创建一个表格模板 .
项目中要用到一些展示信息的表格,表头不固定,表格内容是即时从后台取的:考虑到复用性,笔者用jsp编写了一个表格模板,可以从request中获取List封装的数据,然后通过JSTL结合EL表达式填充到模 ...
django orm原理_django 动态创建一个模型的多个table name，并通过 Django ORM 操作
动态创建table, 并通过 Django ORM 操作. 动态的创建表动态的创建模型其实就是在运行时生成 Model 类, 这个可以通过函数实现, 通过传参(今天的日期, 如: 20181211) ...
Java-BufferedImage动态生成一个表格图片
需求:一个word模板,里边有一个表格,需要根据需求动态填充数据,需要转成pdf,但是我发现转成pdf的方式并不方便,想着还不如将动态的部分生成图片,然后由前端整合其他部分用于展示,也满足了需求. w ...
如何利用MYSQL创建一个表格
1.打开MYSQL,如下. 2.首先必须在一个数据库里面工作,所以你必须创建一个数据库.利用create database +(数据库名称),来出创建数据库. 3.创建好了必须使用它,利用 use + ...

如何动态创建一个表格色阶图

如何动态创建一个表格色阶图相关推荐

最新文章

热门文章