js自动生成表格（带删除功能）_js自动生成表格代码-CSDN博客

本文链接：https://blog.csdn.net/barkL/article/details/119188028

运用到了关于触发对象target和事件委托的一些知识点；

简单来说，谁触发了事件谁就是target对象；

事件委托呢就是你想通过某个节点想触发某个事件，这个节点它自己不亲自来，它委托别的节点来，这个别的节点就是指它的父节点或者更高辈的节点；

事件委托的好处：打个比方：就像table，ul这种节点它的子节点tr，td，li比较多的时候，你恰好又需要给这些子节点都绑定事件函数，给每个子节点都绑定的话，太浪费系统资源了，不如就委托给table，ul这种作为它们的父辈节的节点，给这些父节点添加事件绑定，然后获取当前触发对象，判断一下是不是你想要的触发对象，是的话就执行事件，不是就不执行；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var orow=document.getElementById("row");
				var ocol=document.getElementById("col");
				var obtn=document.getElementById("btn");
				var ot1=document.getElementById("t1");
				obtn.onclick=function(){
					if(orow.value==0||ocol.value==0){
						alert("请输入行和列");
					}else{
						for(i=0;i<orow.value;i++){
							var otr=document.createElement("tr");
							ot1.appendChild(otr);
							for(j=0;j<ocol.value;j++){
								var otd=document.createElement("td");
								otr.appendChild(otd);
							}
							var oclose=document.createElement("button");
							oclose.innerHTML="删除";
							otr.appendChild(oclose);
							
							otr.onclick=function(ev){
								var e = ev || window.event;
								var target=e.target||window.event.srcElement;		//获取target触发对象，由事件对象调用；
								if(target.nodeName.toLowerCase()=="button")
								ot1.removeChild(target.parentNode);
								/* ot1.removeChild(otr); */		//错误代码，在点击生成的时候上面的for循环就已经执行到最后一个tr了，所以otr指向的是for循环的最后一个tr，当最后一个被删除，代码就不执行了
							}
						}
						
						
					}
					
				}
				
				
			}
		</script>
		<style type="text/css">
			table tr td{
				width:100px;
				height: 30px;
				border: #000000 solid 1px;
			}
			table tr button{
				
				height: 35px;
			}
			
		</style>
	</head>
	<body>
		<input type="text" placeholder="行" id="row" />
		<input type="text" placeholder="列" id="col" />
		<input type="button" id="btn" value="生成"/>
		<table id="t1"></table>
		
	</body>
</html>