JS随机生成表格

在blueidea看打一个面试题。要求如下

1、
任意输入 行数或列数 点击 “生成表格”
就可以生成对应的表格；

2、
行数和列数必须是整型数值，否则提示非法！

3、
在生成表格的单元格中随机填入 1到15之间的随机整数，并在每个单元格的背景随机填充颜色；

4、
点击表格任意单元格，将其数值和背景颜色反应在下面的 未命名.jpg

下拉框和色块中；未点击单元格该区域不显示；

5、
选择下拉框中的任意数值将该数值所在的单元格标识出来，将单元格的边框用红色方框起来；（注意：另选数字之后，要清空先前被框选的单元格的标识！）

6、
效率要求：在IE6下，100×100生成表格时间小于3秒。要求在页面中打印出生成表格所耗费的时间。

7、
代码中要用到事件代理机制，说白了就是不要在每个单元个中都加上 onclick等事件。

8、设计一种简单机制，使得单元格数小于255×255×255时，颜色不重复。

第5条下拉框不理解是啥意思外，第8条也没实现出来。。还待研究。

下面是JS：

var oldTime,nowTime ;
//获取行列
function getRC(){
    oldTime = new Date().getTime();
if(isTable){alert("表格已经存在");return;}
var r = document.getElementsByName("row")[0].value;
var c = document.getElementsByName("col")[0].value;
if(isInt(r)&&isInt(c)){
        createTable(r,c);
        isTable = true;
    }else{
        alert("行列必须为正整数！");
    };
};

//判断正整数
function isInt(num){
var t = /^[0-9]+$/;
return t.test(num);
}

//获取元素
function g(id){
if(!id)return;
if (typeof id =="string"){
return document.getElementById(id);
    };
return id;
};

//创建元素
function createEle(obj){
var ele,o,father;
    ele = obj.ele || "div";
    o = document.createElement(ele);
if(obj.css){
        setStyle(o,obj.css);
    };
    father = obj.father || document.body;
    father.appendChild(o);
return o;
};

//设置样式
function setStyle(o,css){
if(!o)return ;
for(var i in css){
var s = o.style;
var x = css[i];
var y = x+ "px";
switch (i){
case "w" : s.width = y ;break;
case "h" : s.height= y ;break;
case "l" : s.left  = y ;break;
case "t" : s.top   = y ;break;
case "a" : s.absolute = x ;break;
case "d" : s.display = x ;break;
case "z" : s.zIndex = x ;break;
case "i" : o.innerHTML = x;break;
case "b" : s.border = x ;break;
case "bg": s.background = x;break;
case "d" : s.display = x ;break;
case "m" : s.margin = x;break;
case "p" : s.padding = x;break;
default : s[i] = x ;break;
        }
    };
};

//事件处理
var EventUtil = {
    addHandler:function(ele,type,handler){
var e = {a:["addEventListener","attachEvent"],r:["removeEventListener","datachEvent"]};
var name = arguments[3] == true ? e.r : e.a;
if(ele[[name][0]]){
                ele[[name][0]](type,handler,false)
            }else if(ele[[name][1]]){
                ele[[name][1]]("on"+type,handler);
            }else{
                handler = arguments[3]==true ? null : handler;
                ele["on"+type] = handler;
            }
    },
    removeHandler:function(ele,type,handler){
this.addHandler(ele,type,handler,true);
    },
    getEvent:function(event){
return event || window.event;
    },
    getTarget:function(event){
if(event.target){
return event.target;
        }else if(event.srcElement){
return event.srcElement;
        };
return false;
    },
    addLoad:function(fn){
var old = window.onload;
if(typeof old == "function"){
            window.onload = function(){
                old();
                fn();
            }
        }else{
            window.οnlοad=fn;
        }
    },
    stopPropagation:function(event){
if(event.stopProPagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    preventDefault:function(event){
if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    }
};

//创建表格
function createTable(trNum,tdNum){
var table = createEle({ele:"div",css:{cursor:"pointer",textAlign:"center"}});

var tr = [];    
for(var i = 0;i<trNum;i++){
var td = [];
for(var n = 0;n<tdNum;n++){
var r,g,b,t;
                t = randomNum(15,1);
                r = randomNum(255,1);
                g = randomNum(255,1);
                b = randomNum(255,1);
var rgb = r+","+g+","+b    ;    
            td.push("<td style='background:rgb("+rgb+")'>"+t+"</td>");
        };
        tr.push("<tr>"+td.join("")+"</tr>");
    };

    table.innerHTML = "<table><tbody>"+tr.join("")+"</tbody></table>";
    EventUtil.addHandler(table,"click",getInfo);
    nowTime = new Date().getTime() - oldTime;
    alert(nowTime/1000);
};


var tdColor,colorNum,numText,tableInfo,isTable = false;
//初始化
EventUtil.addLoad(function(){
    tdColor = g("tdColor");
    colorNum =g("colorNum");
    numText = g("numText");
    tableInfo = g("tableInfo");
});

//获取表格信息
function getInfo(event){
var b;
    event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.nodeName.toLowerCase()==="td"){
        setStyle(tableInfo,{d:"block"})
        b = target.style.background;
        setStyle(tdColor,{bg:b,w:20,h:20});
        setStyle(colorNum,{i:b.slice(b.search(/rgb/i))});
        setStyle(numText,{i:target.innerHTML});
        EventUtil.stopPropagation(event);        
    }    
};

//随即数
function randomNum(upper,lower){
return Math.floor(Math.random() * (upper - lower + 1) + lower);    
};

下面是HTML部分：

 

<input type="text" size="3" name="row" value="10" />行
<input type="text" size="3" name="col" value="10" />列
<input type="submit" name="submitBtn" value="提交" onclick="getRC();" />
<br />
<div id="tableInfo" style="display:none;">
    您点击表格的的数字是：<br />
<strong id="numText"></strong><br />
    颜色是：<div class="color" id="tdColor"></div><br />
    色值是：
<div id="colorNum"></div>
<br />
</div>

 

 

 

 

转载于:https://www.cnblogs.com/webstarting/archive/2012/02/15/2352964.html