[做特效, 学JS] -- 10 自动生成表格最终效果需要实现的功能输入行数和列数,生成符合函数和列数的表格表格中的数字

最终效果

需要实现的功能

输入行数和列数, 生成符合函数和列数的表格
表格中的数字范围 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 自动生成表格

最终效果

需要实现的功能

最终代码

专栏地图