如何动态创建一个表格色阶图
这里以红色系列为例（红色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)之间的随机数。
