Javascript: 当点击submit提交按钮时将文本框中的信息添加到下面得表单中

最新推荐文章于 2024-01-04 08:03:21 发布

wang_gmail

最新推荐文章于 2024-01-04 08:03:21 发布

阅读量6.5k

点赞数

分类专栏： Web前端文章标签：将信息提交到表单中 javascript

本文链接：https://blog.csdn.net/wang_gmail/article/details/29571807

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ADD </title>
<script type="text/javascript">
 
 window.onload = function(){
	 
	 document.getElementById("addEmpButton").onclick = function(){
		 
		 var nameVal = document.getElementById("name").value;
		 var emailVal = document.getElementById("email").value;
		 
		 var nameTd = document.createElement("td");
		 nameTd.appendChild(document.createTextNode(nameVal));

		 var emailTd = document.createElement("td");
		 emailTd.appendChild(document.createTextNode(emailVal));
		 
		 var tr = document.createElement("tr");
		 
		 tr.appendChild(nameTd);
		 tr.appendChild(emailTd);
		 
		 confirm("确定要添加新成员嘛");
		 document.getElementById("employeetable")
		         .getElementsByTagName("tbody")[0]
		         .appendChild(tr);
		 
	 }
	 
 }

</script>
</head>
<body>

	<center>
		<br> <br> 添加新成员<br> <br>
		 name: <input type="text" name="name" id="name" />   
		 email: <input type="text" name="email" id="email" />    <br> <br>
		<button id="addEmpButton" value="abc">Submit</button>
		<br> <br>
		<hr>
		<br> <br>
		<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
			<tbody>
				<tr>
					<th>Name</th>
					<th>Email</th>
				</tr>
			</tbody>
		</table>
	</center>

</body>
</html>