[作特效, 學JS] -- 10 自動生成表格

時間 2019-11-17

原文原文鏈接

最終效果

須要實現的功能

輸入行數和列數, 生成符合函數和列數的表格
表格中的數字範圍 0-99, 隨機產生
表格須要背景顏色
若是行數和列數爲空, 彈框提示
若是輸入不符合規範(1-50), 彈框提示(包括 0, 01,hello)
反覆點擊按鈕, 能夠重複生成符合規範的列表

最終代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>插入制定表格數的表格</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link href="" rel="stylesheet" />
        <style> body { font: 700 14px/1.5 Arial; margin: 0; padding: 0 10px; } table { clear: both; border: 1px solid #000; } td { 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; } em { width: 25px; height: 25px; display: inline-block; margin-right: 5px; } #setting label, #setting input, #setting a { float: left; } strong { color: red; margin-left: 20px; } </style>
    </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>
            <strong>提示：行和列只能是數字，且最大爲50</strong>
        </div>
        <script src="demo.js"></script>
    </body>
</html>
複製代碼

window.onload = function(){
	// 獲取按鈕對象
	var oBtn = document.getElementById('btn');

	oBtn.onclick = function(){
		// 獲取用戶輸入的行數
		var row = document.getElementById('row').value;
		// 獲取用戶輸入的列數
		var col = document.getElementById('col').value;
		// 正則的規則
		var reg = /^(50|[1-9]|[1-4][0-9])$/;
		// 判斷是否爲空, 是否已經輸入
		if(!row || !col){
			alert("請輸入表格數");
			return;
		}

		// 判斷是否符合輸入條件
		if(!reg.test(row) || !reg.test(col)){
			alert('輸入的表格格式不正確! 滾!')
			return;
		}


		// 判斷, 若是已經生成表格, 就把這個表格幹掉
		// 召喚父元素, 把兒子幹掉, 保證了表格的惟一
		var oTable = document.querySelector('table');
		if(oTable){
			oTable.parentNode.removeChild(oTable);
		}



		// 生成一個table標籤
		var oTable = document.createElement('table');
		// 在table裏生成五個tr標籤
		for (var i = 0; i < row; i++) {
			var oTr = document.createElement('tr');
			// 在tr裏生成五個td標籤
			for (var j = 0; j < col; j++) {
				// 生成td標籤
				var oTd = document.createElement('td');
				// 給td標籤的內容設置爲隨機數, 0-99
				oTd.innerHTML = Math.floor(Math.random()*100);
				// 給td增長背景色
				var first = Math.floor(Math.random()*155+100);
				var second = Math.floor(Math.random()*155+100);
				var third = Math.floor(Math.random()*155+100);
				// 生成隨機背景色
				oTd.style.backgroundColor = "rgb("+first+","+second+","+third+")";
				// 把td標籤追加到tr標籤裏
				oTr.appendChild(oTd);
			}
			// 把tr標籤追加到table裏
			oTable.appendChild(oTr);
		}
		// 往body標籤裏, 追加table標籤
		document.body.appendChild(oTable);
	}
}
複製代碼