js动态创建表格

1.body内容

输入要生成的行数和列数

	<body>
		<div style=" width:450px; margin: auto;">
			<input type="text" value=""/>行
			<input type="text" value=""/>列
			<button type="button">添加</button>
		</div>
	</body>

2.script内容

<script>
	//获取对象
	var oBtn = document.querySelector("button");
	var oIpt = document.getElementsByTagName("input");
	
	//事件绑定
	oBtn.onclick = function(){
		//输入框输入的内容为字符串类型
		var row = Number(oIpt[0].value);
		var col = Number(oIpt[1].value);
		console.log(row);
		if(row==0 || col ==0 || isNaN(row) || isNaN(col)){ //行或列输入格式不正确时不创建表格
			//输入文本框内容清空
			oIpt[0].value = "";
			oIpt[1].value = "";
			return alert("非法输入，请重新输入");
		}else{
			var oTable = document.createElement("table");//创建table节点
			document.body.appendChild(oTable);//连接节点
			oTable.border = "1px solid black";
			oTable.style.margin = "30px auto 0";
			oTable.style.borderSpacing = "0";
			
			for(var i=0;i<row;i++){
				var oTr = document.createElement("tr");//创建tr节点
				oTable.appendChild(oTr);//连接节点
				oTr.style.height = "30px";
				
				for(var j=0;j<col;j++){
					var oTd = document.createElement("td");//创建td节点
					oTr.appendChild(oTd);//连接节点
					oTd.style.width = "100px";
				}
			}
		}
		//输入文本框内容清空
		oIpt[0].value = "";
		oIpt[1].value = "";
	}
</script>

通过js创建的动态表格

1.body内容

2.script内容

猜你喜欢