js动态生成表格特效，兼容当前主流浏览器，任意输入行数和列数点击生成即可生成动态表格，实用动态生成js特效。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>js动态生成表格行列特效_武鸣人</title>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<style>
body{font:700 14px/1.5 Arial;margin:0;padding:0 10px;}
table{clear:both;border:1px solid #000;}
td{color:#FFF;cursor:pointer;text-align:center;border:1px solid #000;padding:5px;}
#set_wuming_ren{float:left;clear:left;line-height:28px;margin:10px 0;}
#set_wuming_ren input{width:50px;font-family:inherit;border:2px solid #CCC;margin:0 5px;padding:4px;}
#btn{font-size:14px;line-height:18px;color:#fff;text-decoration:none;background:#353535;border-top:1px #999 solid;border-radius:5px;padding:4px 6px;}
#msg_www_wuming_ren{float:left;clear:both;height:25px;display:none;line-height:25px;margin-bottom:10px;}
#msg_www_wuming_ren em{width:25px;height:25px;display:inline-block;margin-right:5px;}
#set_wuming_ren label,#set_wuming_ren input,#set_wuming_ren a,#msg_www_wuming_ren span,#msg_www_wuming_ren em{float:left;}
</style>
<script>
/*
在蓝色理想看到的网友提问, 闲来无事做了一下
要求：
1) 任意输入行数或列数, 生成对应表格;
2) 行数, 列数必须为正整数类型, 否则提示非法;(这里我用正则限制1-100, 避免网友测试输入过大值造成浏览器假死)
3) 在生成表格的单元格中随机填入1到15之间的随机数, 并给每个单元格设置随机背景颜色;
4) 点击任意单元格, 将其数和背景颜色输出显示;
5) 效率要求：100*100生成表格时间小于3秒;
6) 代码中要用到事件代理机制;
7) 设计一种简单机制, 使单元格数小于255*255*255时, 颜色不重复
8) 要求符合w3c验证, 兼容IE, Firefox, chrome等浏览器
*/
function CreateTable() {
this.oTable = null;
this.bgColor = 0;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
CreateTable.prototype = {
init: function(row, col) {
var oFrag = document.createDocumentFragment();
var oTemp = document.createElement("div");
var oBody = document.body;
var aRow = [];
var aCol = [];
for(var i = row; i--;) {
aCol.length = 0;
for(var j = col; j--;) {
this.bgColor = this.getRanColor();
aCol.push("<td style=\"background:"+ this.bgColor +";\">"+this.randomRange(1, 15)+"</td>");
}
aRow.push("<tr>"+ aCol.join("") +"</tr>")
}
oTemp.innerHTML = "";
oTemp.innerHTML = "<table><tbody>"+ aRow.join("") +"</tbody></table>";
while(oTemp.firstChild) oFrag.appendChild(oTemp.firstChild);
this.oTable && oBody.removeChild(this.oTable);
oBody.appendChild(oFrag);
this.oTable = oBody.lastChild
},
randomRange: function(lower, upper) {
return Math.floor(Math.random() * (upper - lower + 1) + lower)
},
getRanColor: function() {
var str = this.randomRange(0, 0xF0F0F0).toString(16);
while(str.length < 6) str = "0" + str;
return "#" + (this.bgColor.toString().replace("#", "").toString(10) === str.toString(10) ? str + 100000 : str)
}
};
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onload = function() {
var oTab = new CreateTable();
var oRow = document.getElementById("row");
var oCol = document.getElementById("col");
var oBtn = document.getElementById("btn");
var oMsg = document.getElementById("msg_www_wuming_ren");
oBtn.onclick = function() {
var reg = /^((?!0)\d{1,2}|100)$/;
if(!reg.test(oRow.value)) {
alert("\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u6570\u503c\uff1a\n\n\u5217\u6570\u8303\u56f4\u30101-100\u3011");
oRow.select();
return
}
else if(!reg.test(oCol.value)) {
alert("\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u6570\u503c\uff1a\n\n\u884c\u6570\u8303\u56f4\u30101-100\u3011");
oCol.select();
return
}
//隐藏信息区域
oMsg.style.display = "none";
//防止内存泄漏
oTab.oTable && (oTab.oTable.onclick = null);
//重新渲染表格
oTab.init(oRow.value, oCol.value);
//事件代理
oTab.oTable.onclick = function(e) {
e = e || event;
var oTarget = e.target || e.srcElement;
if(oTarget.tagName.toUpperCase() === "TD") {
oMsg.style.display = "block";
oMsg.innerHTML = "";
oMsg.innerHTML = "<span>\u60a8\u9009\u62e9\u7684\u533a\u57df\u6570\u5b57\u662f\uff1a"+oTarget.innerHTML+"\uff0c\u989c\u8272\u4e3a\uff1a"+"</span><em style=\"background:"+ oTarget.style.backgroundColor +";\"></em><span>"+oTarget.style.backgroundColor+"</span>";
}
}
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="set_wuming_ren">
<label>行数</label><input type="text" id="row" />
<label>列数</label><input type="text" id="col" />
<a href="javascript:;" id="btn">生成表格</a>
</div>
<div id="msg_www_wuming_ren"></div>
</body>
</html>本文来自武鸣人网站，转载请注明出处