【推薦】JS面試題-動態生成表格代碼_網頁代碼站(www.hbsxmp.com)

歡迎您來到網頁代碼站！設為首頁網頁代碼站分割線

網頁代碼站分割線

加入收藏

網頁代碼站分割線

網頁代碼站分割線

留言板

網頁代碼站分割線

精品美文

網頁代碼站分割線

網頁代碼站分割線

在線手冊

如果您關閉了瀏覽器的javascript，可能導致頁面部分功能無法顯示，請開啟javascript以便正常瀏覽本網頁。網頁代碼站(www.hbsxmp.com)謝謝您的支持！

熱搜:div

您的當前位置：網頁代碼站 >> 表單及按鈕 >> 【推薦】JS面試題-動態生成表格代碼

【推薦】JS面試題-動態生成表格代碼

分類：表單及按鈕時間：2014-04-01 點擊：

關鍵詞：JS|網頁代碼|動態|生成表格|

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>【推薦】JS面試題-動態生成表格代碼_網頁代碼站(www.hbsxmp.com)</title>
<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;}
#setting{float:left;clear:left;line-height:28px;margin:10px 0;}
#setting 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{float:left;clear:both;height:25px;display:none;line-height:25px;margin-bottom:10px;}
#msg em{width:25px;height:25px;display:inline-block;margin-right:5px;}
#setting label,#setting input,#setting a,#msg span,#msg em{float:left;}
</style>
<script> 
function CreateTable() {
	this.oTable  = null;
	this.bgColor = 0;
}
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)
	}
};
 
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");
 
	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>";	
			}
		}
	}
};
</script>
</head>
<body>
<div id="setting">
    <label>行數</label><input type="text" id="row" />
    <label>列數</label><input type="text" id="col" />
    <a href="javascript:;" id="btn">生成表格</a>
</div>
<div id="msg"></div>
<br>
<p><a href="http://www.hbsxmp.com">網頁代碼站</a> - 最專業的網頁代碼下載網站 - 致力為中國站長提供有質量的網頁代碼！</p>
</body>
</html>

運行代碼全選代碼復制代碼保存代碼友情提示

網頁代碼站代碼預覽圖片

利用JS動態生成表格，是一個JS面試題，在行、列輸入框中輸入要生成的行列數，可立即生成表格，要求如下：
　　1) 任意輸入行數或列數, 生成對應表格;
　　2) 行數, 列數必須為正整數類型, 否則提示非法;(這里我用正則限制1-100, 避免網友測試輸入過大值造成瀏覽器假死)
　　3) 在生成表格的單元格中隨機填入1到15之間的隨機數, 并給每個單元格設置隨機背景顏色;
　　4) 點擊任意單元格, 將其數和背景顏色輸出顯示;
　　5) 效率要求：100*100生成表格時間小于3秒;
　　6) 代碼中要用到事件代理機制;
　　7) 設計一種簡單機制, 使單元格數小于255*255*255時, 顏色不重復
　　8) 要求符合w3c驗證, 兼容IE, Firefox, chrome等瀏覽器

一、如果您使用的瀏覽器版本為IE6.0、360瀏覽器V3.0.8.1版本或者IE的更低版本瀏覽本頁面，建議您升級瀏覽器至IE7以上，上面的“運行”按鈕可能不能用，但您可按以下方式查看。
運行代碼方式：
1、點擊“復制”按鈕；
2、在桌面建立一個txt文檔；
3、粘貼復制的代碼；
4、最后把txt的擴展名改為“htm”或“html”；
5、完成，打開即可看到效果。

二、如果您使用FireFox或者非IE瀏覽器，建議您使用IE7以上版本。上面的“復制”按鈕失效，請您“全選”，以普通方式復制！

三、某些代碼因需加載完Jquery等之類比較大的JS文件，如果您看不到效果，請您刷新頁面！

四、某些代碼不能完全兼容各瀏覽器，還請您再次修改才能使用！給您帶來的不便！盡請諒解！謝謝您的支持！

上一篇：JS實現只允許表單提交一次
下一篇：超漂亮來自老款優酷的JS+CSS漂亮搜索框

問問 | 貼吧 | 查詢 | 給我留言 | 精品美文 | 友情鏈接 | | 本站承接網站開發業務
版權聲明 | 廣告服務 | 聯系我們 | 網站地圖 | 關于我們 | | 滇ICP備08101440號
Powered by 網頁代碼站(網頁即"web" + 代碼即"dm" + "cn" = webdm.cn) | 最專業的代碼下載網站 - 致力為中國站長提供高質量的代碼！

滇公網安備 53032202100002號

精品久久久久久久中文字幕