题目要求：
1) 任意输入行数或列数, 生成对应表格;
2) 行数, 列数必须为正整数类型, 否则提示非法;(这里我用正则限制1-100, 避免网友测试输入过大值造成浏览器假死)
3) 在生成表格的单元格中随机填入1到15之间的随机数, 并给每个单元格设置随机背景颜色;
4) 点击任意单元格, 将其数和背景颜色输出显示;
5) 效率要求：100*100生成表格时间小于3秒;
6) 代码中要用到事件代理机制;
7) 设计一种简单机制, 使单元格数小于255*255*255时, 颜色不重复
8) 要求符合w3c验证, 兼容IE, Firefox, chrome等浏览器
参照大牛写出的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Demos</title> 6 <style> 7 body {font-weight:bold; font-family:"微软雅黑";} 8 label {margin-right:2px;} 9 input[type="text"] {width:50px; height:20px; border: 2px solid #ccc;} 10 input[type="submit"] {width:70px; height:30px; background:#000; border-radius:5px; color:#fff; font-size:14px; font-family:"微软雅黑";} 11 table {clear:both; border:1px solid #000;} 12 td {color:#FFF;cursor:pointer;text-align:center;border:1px solid #000;padding:5px;} 13 #msg {margin: 5px 0; line-height:25px;} 14 #msg span {height:25px; line-height:25px;} 15 #msg em {width:25px;height:25px;display:inline-block;margin-right:5px;} 16 </style> 17 </head> 18 <body> 19 <label>行数</label><input type="text" name="row" id="row"> 20 <label>列数</label><input type="text" name="col" id="col"> 21 <input type="submit" value="生成表格" id="btn"> 22 <div id="msg"></div> 23 <script type="text/javascript"> 24 function createTable(){ 25 this.oTable = null; 26 this.bgColor = 0; 27 } 28 createTable.prototype = { 29 init: function(row,col){ //生成表格函数 30 var inner = ""; 31 var oFrag = document.createDocumentFragment(); //文档片段 32 var oBody = document.body; 33 var oTemp = document.createElement("div"); 34 var aRow = []; 35 var aCol = []; 36 for(var i=0; i< row; i++) { 37 aCol.length = 0; 38 for(var j=0; j<col; j++) { 39 aCol.push('<td style="background:'+this.getRanColor()+'">'+this.randomRange(1,15)+'</td>'); 40 } 41 aRow.push("<tr>"+aCol.join("")+"</tr>"); 42 } 43 oTemp.innerHTML = "<table><tbody>"+aRow.join("")+"</tbody></table>"; //div中包裹table 44 while(oTemp.firstChild) //将oTemp的DOM赋予oFrag，会删除oTemp中的DOM元素 45 oFrag.appendChild(oTemp.firstChild); 46 this.oTable && oBody.removeChild(this.oTable); 47 oBody.appendChild(oFrag); 48 this.oTable = oBody.lastChild; 49 }, 50 randomRange : function(lower, upper){ 51 return Math.floor(Math.random()*(upper-lower+1)+lower); 52 }, 53 getRanColor : function(){ //生成随机背景颜色 54 var str = this.randomRange(0,0xF0F0F0).toString(16); 55 if(str.length < 6) 56 str = "0" + str; 57 return "#"+(this.bgColor.toString().replace("#","").toString(10)===str.toString(10) ? str+100000 : str); 58 } 59 } 60 window.onload = function(){ 61 var oTab = new createTable(); 62 var row = document.getElementById("row"); 63 var col = document.getElementById("col"); 64 var btn = document.getElementById("btn"); 65 var msg = document.getElementById("msg"); 66 btn.onclick = function(){ 67 var inputRow = row.value; 68 var inputCol = col.value; 69 70 //正则表达式判断输入 71 var reg = /^((?!0)d{1,2}|100)$/; //疑点1：正则表达式 72 if(!reg.test(inputRow)) { 73 alert("请输入0-100之间的整数"); 74 inputRow.select(); 75 return false; 76 } 77 if(!reg.test(inputCol)) { 78 alert("请输入0-100之间的整数"); 79 inputCol.select(); 80 return false; 81 } 82 //隐藏信息区域 83 msg.style.display = "none"; 84 85 oTab.oTable && (oTab.oTable.onclick = null); 86 87 oTab.init(inputRow,inputCol); 88 89 //事件代理机制 90 oTab.oTable.onclick = function(e) { 91 e = e || event; 92 var oTarget = e.target || e.srcElement; 93 if(oTarget.tagName.toUpperCase() == "TD") { 94 msg.style.dispaly = "block"; 95 msg.innerHTML = "<span >您选择的区域数字是："+oTarget.innerHTML +'，颜色为：<em style="background:'+oTarget.style.backgroundColor+'">'+'</em>' 96 +oTarget.style.backgroundColor+"</span>"; 97 98 } 99 } 100 } 101 } 102 </script> 103 </body> 104 </html>
执行结果：
几点注意：
1. 事件代理：
http://www.cnblogs.com/rubylouvre/archive/2009/08/09/1542174.html
2. 文档片段与innerHTML的使用
3. 正则表达式判断输入的数字