[作特效, 学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);
	}
}
复制代码

[作特效, 学JS] -- 10 自动生成表格

最终效果

须要实现的功能

最终代码

专栏地图