js表格添加与删除操作

html代码

<input type="text"  id="txt1"  />
		<input type="text"  id="txt1"  />
		<input type="text"  id="txt1"  />
		<input type="button" id="btn" value="添加" />
		<table></table>

js代码

<script type="text/javascript">
			//表格添加与删除操作
			var oInput = document.querySelectorAll("input");//获取所有input
			var oTab = document.getElementsByTagName("table")[0];//获取表格table
			btn.onclick = function(){//点击添加函数
				var oTr = document.createElement("tr");//创建tr
				for(var i = 0;i < oInput.length-1;i++){//for循环来创建td
					oTd = document.createElement("td");
					oTd.innerHTML = oInput[i].value;//把input内容写入
					//td加样式
					oTd.style.width = 100 + "px";
					oTd.style.borderColor = "aqua";
					oTd.style.borderWidth = 2 + "px";
					oTd.style.borderStyle = "solid";
					oTr.appendChild(oTd);//td放入tr中
				}
				var oTd = document.createElement("td");//创建td存放删除的btn
				var oBtn = document.createElement("button");//创建button
				oBtn.innerHTML = "删除";//td中加入"删除"
				oTd.appendChild(oBtn);//button加入td中
				oTr.appendChild(oTd);//td加入tr中
				oTab.appendChild(oTr);//tr加入table
				
			oBtn.onclick = function(){//删除函数
				oTab.removeChild(oTr);
			}
			}
		</script>