获取表单信息，存放在表格中，展示出来并删除

最新推荐文章于 2022-10-11 19:54:24 发布

原创最新推荐文章于 2022-10-11 19:54:24 发布 · 276 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML页面，该页面包含一个用于输入姓名、年龄和性别的表单及一个提交按钮。当点击提交按钮时，表单数据将被收集并动态添加到表格中。此外，还提供了一种通过点击“删除”来移除表格行的功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
	</head>
	<body>
		姓名：<input type="text" />
		年龄：<input type="text" />
		性别：<input type="text" />
		<input type="button"value = "提交" id="btn">
		<table border="0" id="Tab"></table>
		<script>
			var oIN = document.getElementsByTagName("input");
			oIN[oIN.length-1].function(){
				var oTr = document.createElement("tr");
				for(var i=0;i<oIN.length-1;i++){
					 	var oTd = document.createElement("td");
					 	oTr.appendChild(oTd);
					 	Tab.appendChild(oTr);
					 	var val = oIN[i].value;
					 	var oTxt = document.createTextNode(val);
					 	oTd.appendChild(oTxt);
				}
				var anniu = document.createElement("td");
				oTr.appendChild(anniu); 
				anniu.innerHTML = "<span>删除</span>";
				var oSpan = document.getElementsByTagName("span");
				for(var i =0;i<oSpan.length;i++){
					oSpan[i].onclick = function(){
						Tab.removeChild(this.parentNode.parentNode);
					}
				}
			}
		</script>
	</body>
</html>