javascript学习DOM3

最新推荐文章于 2022-05-25 23:53:59 发布

星屑幻想

最新推荐文章于 2022-05-25 23:53:59 发布

阅读量508

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Stardust_fantasy/article/details/123621263

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		行：<input id="row"><br/>
		列：<input id="col"><br/>
		<button onclick="createTab()">创建表格</button>
		<br/>
		<!-- div 存在的目的就是存放表格的 -->
		<div id="tab"></div>
		
		<script type="text/javascript">
			
			function createTab(){
				
				//1：获取用户输入的内容
				var row = document.getElementById("row").value;
				var col = document.getElementById("col").value;
				
				// 2：创建表格, 假设创建3行3列
				//先创建 table，然后在创建里面的tr, 有几行就创建几个tr
				//然后在tr中创建一个一个的单元格，有几列就创建几列
				//table内有tr,tr内有td,通过父标签添加子标签
				var table = document.createElement("table");
				table.setAttribute("width","300px")
				table.setAttribute("height","100px")
				table.setAttribute("border","1px solid")
				
				// for循环中嵌套了一个for循环，双重for循环
				//使用循环来创建
				for (var i = 0; i < row; i++) {
					var tr = document.createElement("tr");
					
					for (var j = 0; j < col; j++) {
						var td = document.createElement("td");
						
						//创建一个单元格就添加到tr上
						tr.appendChild(td);
					}
					
					//创建好了一行，就添加到table.atable上
					table.appendChild(tr)
				}
				
				//将表格固定在 div标签上
				var div = document.getElementById("tab");
				div.appendChild(table)
				
			}
			
		</script>
		
		
	</body>
</html>