Js随机动态生成表格

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

Js随机动态生成表格

标签：动态表格　时间：2012-02-09　已阅读：
兼容性不错的Js动态生成表格，根据用户输入的列数和行数生成随机表格，点击每一个单元格弹出其TextNode和背景颜色值，IE6下，100x100的生成表格时间小于3秒，符合 W3C验证，并兼容 IE、FF、谷歌等浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据列和行生成表格</title>
<style type="text/css">
	*{margin:0;padding:0;}
	li{list-style:none}
	table{ border-collapse:collapse;width:100%;border:#ccc 1px solid;}
	#wraper{width:900px;margin:10px auto;}
	#wraper table{clear:both;border:#ccc 1px solid;}
	#wraper table td{border:#ccc 1px solid;padding:2px;font-size:12px;}
	#wraper table th{background:#eee;color:#000;}
	#wraper p {height:40px;}
	#wraper p label{font-size:12px;margin:0 5px;}
	#wraper p .intxt{border:#ccc 1px solid;padding:2px;width:50px}
</style>
<script type="text/javascript">
	window.onload = function(){
			var rows = document.getElementById('row').value;
			var cols = document.getElementById('col').value;			
			var box_table = document.getElementById("box_table");
			var btn = document.getElementById('btn');
			var tabletag = document.createElement("table");	
			var oTable = box_table.appendChild(tabletag);
			var oTr = document.createElement("tr");
			var oTd = document.createElement("td");
			var i = j = 0;
			var oNum = document.getElementById('num');
			btn.onclick = function(){
			for(i=0;i<rows;i++){
					var oRows=oTable.insertRow(i)//FF
					//var oRows = oTable.appendChild();
				for(j=0;j<cols;j++){
					var oCols = oRows.insertCell(j)//FF
					oCols.innerHTML = parseInt(Math.ceil(Math.random()*15+1));
					oCols.style.background="#eee"
					}
				}
			
				
				}
		}
</script>
</head>
<body>	
	
	<div id="wraper">
   	 <p><label>输入行数:</label><input type="text" id="row" class="intxt" /><label>输入列数:</label><input type="text" class="intxt" id="col" /><input id="btn" type="button" value="生成表格" /></p>
		<div id="box_table">
        
        </div>
        <p id="num"></p>
    </div>
</body>
</html>

Js随机动态生成表格

本类推荐代码

本类阅读排行

最新源码下载