面试题：动态生成表格

题目要求：

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>

demo

执行结果：

几点注意：

1. 事件代理：

http://www.cnblogs.com/rubylouvre/archive/2009/08/09/1542174.html

2. 文档片段与innerHTML的使用

3. 正则表达式判断输入的数字