案例动态创建表格

最新推荐文章于 2023-04-06 14:23:18 发布

qq_38068491

最新推荐文章于 2023-04-06 14:23:18 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/82991504

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="inp1" id="inp1" value="" />
		<input type="text" name="" id="inp2" value="" />
		<input type="button" name="btn" id="btn" value="按钮" />
		<div id="box">
			
		</div>
	</body>
</html>
<script type="text/javascript" src="../public.js">
	
</script>
<script type="text/javascript">
	function $id(id){
		return document.getElementById(id);
	}
	$id("btn").onclick=function(){
		//得到表格的行与列
		var inp1=$id("inp1").value;
		var inp2=$id("inp2").value;
		var table=document.createElement("table");
		table.border="1";
		for (var i = 0; i < inp1; i++) {
			var row=document.createElement("tr");
			for (var j = 0; j <=inp2; j++) {
				var col=document.createElement("td");
			    col.innerHTML=getRand(0,99);
			    col.style.backgroundColor=getRandColor();
			    row.appendChild(col);
			    if(j==inp2){
			    	col.innerHTML="";
			    	col.style.backgroundColor="white";
			    	var a=document.createElement("a");
			    	a.innerHTML="删除";
			    	a.href="#";
			    	col.appendChild(a);
			    		a.onclick=function(){
			    		this.parentNode.parentNode.remove();
			    	}
			    	
			    
			    }
			    
			}
			table.appendChild(row);
		}
		
		$id("box").appendChild(table);
	}
	
</script>