动态创建Table每行随机换色
最近在学习javascript，所以写下例子，练习一下，记录今天，方便以后查看！
JavaScript用的是静态私有变量，每个实例都没有自己的私有变量。
Css代码如下：
1 table {max-width: 100%;background-color: transparent;border-collapse: collapse;border-spacing: 0;} 2 .table {width: 100%;margin-bottom: 20px;} 3 .table th,.table td {padding: 8px;line-height: 20px;text-align: left;vertical-align: top;border-top: 1px solid #dddddd;} 4 .table th {font-weight: bold;} 5 .table thead th {vertical-align: bottom;} 6 .table tbody + tbody {border-top: 2px solid #dddddd;} 7 .table-hover tbody tr:hover td,.table-hover tbody tr:hover th {background-color: #f5f5f5;} 8 .table tbody tr.success td {background-color: #dff0d8;} 9 .table tbody tr.error td {background-color: #f2dede;} 10 .table tbody tr.warning td {background-color: #fcf8e3;} 11 .table tbody tr.info td {background-color: #d9edf7;} 12 .table-hover tbody tr.success:hover td {background-color: #d0e9c6;} 13 .table-hover tbody tr.error:hover td {background-color: #ebcccc;} 14 .table-hover tbody tr.warning:hover td {background-color: #faf2cc;} 15 .table-hover tbody tr.info:hover td {background-color: #c4e3f3;}
JavaScript代码如下：
1 function selectForm(lowerValue, upperValue) { 2 return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue); 3 } 4 (function() { 5 var row = 10; 6 var col = 5; 7 var classNames = ["success", "error", "warning", "info"]; 8 Table = function() { 9 if (arguments.length === 1) { 10 row = arguments[0]; 11 } else if (arguments.length === 2) { 12 row = arguments[0]; 13 col = arguments[1]; 14 } else if (arguments.length === 3) { 15 row = arguments[0]; 16 col = arguments[1]; 17 classNames = arguments[2]; 18 } 19 }; 20 Table.prototype.getRows = function() { 21 return row; 22 }; 23 Table.prototype.setRows = function(value) { 24 row = value; 25 } 26 Table.prototype.getCols = function() { 27 return col; 28 }; 29 Table.prototype.setCols = function(value) { 30 col = value; 31 } 32 Table.prototype.getclassNames = function() { 33 return color; 34 }; 35 Table.prototype.setclassNames = function(value) { 36 color = value; 37 } 38 Table.prototype.createTable = function() { 39 var data = new Array(); 40 data.push("<table class=\"table table-hover\"><tbody id=\"myTab\">"); 41 for (var i = 0; i < row; i++) { 42 data.push("<tr>"); 43 for (var j = 0; j < col; j++) { 44 data.push("<td>(" + i + "," + j + ")</td>"); 45 } 46 data.push("</tr>"); 47 } 48 data.push("</table></tbody>"); 49 document.body.innerHTML = data.join(""); 50 }; 51 Table.prototype.setTableRowColor = function() { 52 var trs = document.getElementById("myTab").getElementsByTagName("tr"); 53 for (var i = 0; i < trs.length; i++) { 54 trs[i].className = classNames[selectForm(0, classNames.length - 1)]; 55 } 56 } 57 })(); 58 var table = new Table(); 59 table.createTable(); 60 table.setTableRowColor();
Html代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>动态创建Table每行随机换色</title> 5 </head> 6 <body> 7 8 </body> 9 </html>
运行效果图，如下所示：
