【javascript】动态管理用户

最新推荐文章于 2020-02-02 21:53:07 发布

原创最新推荐文章于 2020-02-02 21:53:07 发布 · 991 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Javascript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单表格操作案例，包括如何添加一条记录到HTML表格中，并提供了删除记录的功能。通过创建DOM元素并利用JavaScript进行动态更新，实现了基本的用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
 window.onload = function(){
	 //添加一条记录
	 document.getElementById("adduser").onclick = function(){
	 //获取文本框的值 
	 var namevalue = document.getElementById("name").value;
	 var emailvalue = document.getElementById("email").value;
	 var telvalue = document.getElementById("tel").value;
	 
	 //定义td
	 var nameTdElement =document.createElement("td");
	 var nameTextElement = document.createTextNode(namevalue);
	 nameTdElement.appendChild(nameTextElement);
	 
	 var emailTdElement =document.createElement("td");
	 var emailTextElement = document.createTextNode(emailvalue);
	 emailTdElement.appendChild(emailTextElement);
	 
	 var telTdElement =document.createElement("td");
	 var telTextElement = document.createTextNode(telvalue);
	 telTdElement.appendChild(telTextElement);
	 
	 var aTdElement = document.createElement("td");
	 var aElement = document.createElement("a");
	 aElement.setAttribute("href","deleteEmp?id="+namevalue);
	 var deleteTextElement = document.createTextNode("Delete");
	 aElement.appendChild(deleteTextElement);
	 aTdElement.appendChild(aElement);
	 	
	 //定义tr,将td添加到tr中
	 var trElement = document.createElement("tr");
	 trElement.appendChild(nameTdElement);
	 trElement.appendChild(emailTdElement);
	 trElement.appendChild(telTdElement);
	 trElement.appendChild(aTdElement);
	 
	 //获取table,tbody,将tr节点添加到tbody中
	 var tableElement = document.getElementById("tableuser");
	 var tbodyElement = document.createElement("tbody"); //跨浏览器选择,table自带tbody
	 
	 tbodyElement.appendChild(trElement);
	 tableElement.appendChild(tbodyElement);
	 /******************************************************/
	 //给aElement增加单击事件
	 aElement.onclick = function(){
		 return deleteTr(aElement);  //使网页的链接失效
	 	}	 
	 }
 }
 
 //删除tr
 function deleteTr(aElement){
	 //获取用户名
	 var  name = aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
	 
	 var flag = window.confirm("您真的要删除"+name+"这个用户么");
	 if(!flag){ return false ;} //不删除,点击取消 flag = false
	 
	 //点击确定 flag = true ,删除行
	 var trElement = aElement.parentNode.parentNode;
	 var tableElement = aElement.parentNode.parentNode.parentNode;
	 tableElement.removeChild(trElement);
	 return false ;
 }
</script>

<style type="text/css">
	
</style>

</head>
<body>
	<center>
		添加用户 <br /><br />
		姓名 <input type="text" name="name" id="name" />  
		e-mail <input type="text" name="email" id="email" />  
		电话 <input type="text" name="tel" id="tel" /><br /><br />
		<button id="adduser">提交</button><br /><br /><br />
		<hr />
		<br /><br />
		<table id="tableuser" border="1" cellspacing="0" cellpadding="5">
			<tbody>
				<tr>
					<th>姓名</th>
					<th>e-mail</th>
					<th>电话</th>
					<th> </th>
				</tr>
				<tr>
					<td>tom</td>
					<td>tom@163.com</td>
					<td>1235454</td>
					<td><a href="deleteEmp?id=tom">Delete</a></td>
				</tr>
				<tr>
					<td>kate</td>
					<td>kate@163.com</td>
					<td>432335454</td>
					<td><a href="deleteEmp?id=kate">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>
</body>