JS实现动态生成表格

html和css

body>
	<input type="text"  id="input1" placeholder="请输入行" />
	<input type="text"  id="input2" placeholder="请输入列" />
	<button id="btn">生成</button>
	<table border="1" id="tab">
			
	</table>
</body>

td{width: 40px;height: 20px;}

JS代码

window.onload=function(){
	var oInps=document.getElementsByTagName("input");
	var oBtn=document.getElementById("btn");
	var oTab=document.getElementById("tab");
	oTab.onclick=function(ev){
		var e=ev||window.event;
		var target=e.target||window.event.srcElement;
		if(target.nodeName.toLowerCase()=="button"){
			oTab.removeChild(target.parentNode.parentNode);
		}
	}
	oBtn.onclick=function(){
		if(!oInps[0].value||!oInps[1].value){
			alert("请输入对应的行列")
		}else{
			for(var i=0;i<oInps[0].value;i++){
				var oTr=document.createElement("tr");
				for(var j=0;j<oInps[1].value;j++){
					var oTd=document.createElement("td");
					oTr.appendChild(oTd);
				}
				var oClose=document.createElement("td");
				oClose.innerHTML="<button>删除</button>";
				oTr.appendChild(oClose);
				oTab.appendChild(oTr);
			}	
		}
					
	}
				
}

上述代码在最后的一列添加了删除按钮删除对应的行，这里利用了事件委托，将这个事件委托给Table元素节点，当点击删除时获取触发对象target，即可获取到删除按钮，在对删除按钮的祖先节点进行删除。即可实现 删除对应行功能。