作业

最新推荐文章于 2024-08-09 18:22:29 发布

MXWzjw

最新推荐文章于 2024-08-09 18:22:29 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：作业

本文链接：https://blog.youkuaiyun.com/MXWzjw/article/details/78536911

前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该页面通过JavaScript实现了用户信息的动态添加与删除功能。用户可以在输入框中输入姓名、联系方式及年龄，点击按钮后信息将被添加到页面中的表格里；同时，表格中的每条记录都提供了删除按钮，点击即可删除对应的数据项。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
姓名：<input type="text" id="name" />
联系方式：<input type="text" id="email" />
年龄：<input type="text" id="age" />
<input type="button" value="添加用户" onclick="addUser()"/>
<br /><br /><hr /><br />
<table id="userTable" align="center" border=1 cellspacing=0 cellpadding=5 width="50%">
   <tr>
   		<th>姓名</th>
   		<th>联系方式</th>
   		<th>年龄</th>
   		<th>操作</th>
   		
   </tr>
   <tr>
   		<td>测试</td>
   		<td>sn@dwd</td>
   		<td>18</td>
   		<td>
   			<input type="button" value="删除" onClick="removeUser(this)" />
   		</td>
   		
   		
   </tr>
</table>


	<script type="text/javascript">
		function addUser(){
			var name = document.getElementById('name').value;
			var email = document.getElementById('email').value;
			var age = document.getElementById('age').value;
			var html1 = "<tr><td>"+name+"</td><td>"+email+"</td><td>"+age+"</td><td><input type='button' value='删除' onclick='removeUser()' /></td></tr></table>";
			var newhtml = document.getElementById('userTable').innerHTML+html1;
			document.getElementById('userTable').innerHTML = newhtml;
			
			
		}
		
		function removeUser(obj){
			var removeLine = obj.parentNode.parentNode;
			removeLine.parentNode.removeChild(removeLine);
			
		}


	</script>	
</body>
</html>