JavaScript登录注册动态表格

最新推荐文章于 2021-10-25 15:33:25 发布

冰蛙ing

最新推荐文章于 2021-10-25 15:33:25 发布

阅读量233

点赞数

文章标签： JavaScript动态表格 JavaScript注册删除 JavaScript题型 JavaScript练习题

本文链接：https://blog.csdn.net/he19970408/article/details/100854825

版权

动态表格自动添加和注册删除

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//先创建一个函数  函数名与下面调用的名字相同
			function addUser(){
				//1、创建文本，获取用户输入的内容
//				语法 document.getElementById("对应的id值");
				var nameText = document.getElementById("name").value;
				var pwdText = document.getElementById("password").value;
				var emailText = document.getElementById("email").value;
				//2、将输入的内容封装成文本节点
//				语法 document.createTextNode("文本内容");
				var nameNode = document.createTextNode(nameText);
				var pwdNode = document.createTextNode(pwdText);
				var emailNode = document.createTextNode(emailNode);
				//3、创建td标签
//				语法:document.createElement("需要创建的标签的名字");
				var nametd = document.createElement("td");
				var pwdtd = document.createElement("td");
				var emailtd = document.createElement("td");
				var deltd = document.createElement("td");
				//4、将文本放入td中
//				语法:创建的标签名.appendChild(封装好的输入文本节点名);
				nametd.appendChild(nameNode);
				pwdtd.appendChild(pwdNode);
				emailtd.appendChild(emailNode);
				deltd.innerHTML="<input type='button' value='delete' onclick='deleteUser(this)'/>";
				//5、创建tr标签
				var tr = document.createElement("tr");
				//6、将td放入到tr中
//				语法:将创建好的td的 名字放入到appendChild中
				tr.appendChild(nametd);
				tr.appendChild(pwdtd);
				tr.appendChild(emailtd);
				tr.appendChild(deltd);
				//7、获取表格对象  将tr放入到表格中
				var tbody = document.getElementById("tbd");
				tbody.appendChild(tr);
			}
			function deleteUser(input){
				//获取要删除的标签对象
				var tr = input.parentNode.parentNode;
				var tbody = tr.parentNode;
				tbody.removeChild(tr);
			}
		</script>
	</head>
	<body id="bd">
		<!--先创键一个向用户展示作用的的文本框-->
		username:<input type="text" name="name" id="name"/>
		password:<input name="name" type="text" id="password"/>
		email:<input name="email" type="text" id="email"/>
		<input type="button" onclick="addUser();" value="注册"/>
		<hr color="#7FFF00">
		<!--创建一个table表格 的形式   然后往表格中传值-->
		<table border="1" cellspacing="0" cellpadding="0" align="center" width="70%">
			<tbody id="tbd">
				<tr bgcolor="#7FFF00">
					<td>username</td><td>password</td><td>email</td><td>删除</td>
				</tr>
				<tr>
					<td>hlm</td><td>123</td><td>hlm@zpark.com.cn</td>
					<td><input type="button" onclick="deleteUser(this)" value="delete"/></td>
				</tr>
				<tr>	
					<td>zhangsan</td><td>123</td><td>zhangsan@zpark.com.cn</td>
					<td><input type="button" value="delete" onclick="deleteUser(this)"/></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

冰蛙ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript登录注册动态表格

动态表格自动添加和注册删除<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //先创建一个函数函数名与下面调用的名字相同 function addUser(){ ...
复制链接

扫一扫