JS创建多行盒子

最新推荐文章于 2023-06-05 18:55:39 发布

牧逸

最新推荐文章于 2023-06-05 18:55:39 发布

阅读量1.3k

点赞数

分类专栏： Ĵavascript 文章标签：动态生成div createElement

本文链接：https://blog.csdn.net/qq_42583562/article/details/86762210

版权

Ĵavascript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

想做一个签到系统，所以必须按照教室布局生成盒子，所以做了一个输入几行几列就能动态生成盒子的demo。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>签到系统</title>
	<style type="text/css">
		.lie{
			border: 1px solid black;
			background-color: yellow;
			height: 50px;
			width: 50px;
			float: left;
		}
		.cl{
			clear: both;
		}
	</style>
	<script type="text/javascript">
		function sign(){
			var hang = document.getElementById('hang').value;
			var lie = document.getElementById('lie').value;
			var all = document.getElementById('all');
			if(hang==''||isNaN(hang)||lie==''||isNaN(lie)){
				alert('请输入数字');    //判断是否输入数字或为空
			}else{
				for(var i=0;i<hang;i++){
					//alert('yes');
					var hangNum = document.createElement('div');
					all.appendChild(hangNum);        //在form中创建行
					hangNum.className = 'hang';
                    var cl = document.createElement('div');
					cl.className = 'cl';        //内墙法，撑起盒子高度
					all.appendChild(cl);
					for(var n=0;n<lie;n++){
						var lieNum = document.createElement('div');
						lieNum.className = 'lie';
						hangNum.appendChild(lieNum);        //在行中创建列
					}
				}
			}
			
		}
	</script>
</head>
<body>
	 <div>
	 	<p><input type="text" id="hang">行</p>
	 	<p><input type="text" id="lie">列</p>
	 	<input type="button" id="btn" value="确定" onclick="sign()">
	 	<form action="" id="all"></form>
	 </div>
</body>
</html>