JQuery 练习（1）

最新推荐文章于 2022-11-21 21:10:06 发布

Frost__

最新推荐文章于 2022-11-21 21:10:06 发布

阅读量98

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Frost__/article/details/120207510

版权

JQuery 练习（1）

开发一个基于jQuery框架的前端交互网页，要求如下：

1.开发一个表格，表头有 ID、姓名、性别、专业、操作五个字段，表身内容为空
2.开发一个表单，可分别填入ID、姓名、性别、专业四项数据，使用一个按钮提交数据
3. 表单数据提交后增加到表格的最后一行，且每行的末尾有一个删除按钮，点击删除按钮可以从表格中把当前行删除
4.考虑在数据的添加和移除时使用动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>专业</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>3</td>
					<td>张三</td>
					<td>男</td>
					<td>软件工程</td>
					<td><button class="delete" onclick="deleteUser()">删除</button></td>
				</tr>
				<tr>
					<td>5</td>
					<td>张三</td>
					<td>男</td>
					<td>软件工程</td>
					<td><button class="delete" onclick="deleteUser()">删除</button></td>
				</tr>
				<tr>
					<td>8</td>
					<td>张三</td>
					<td>男</td>
					<td>软件工程</td>
					<td><button class="delete" onclick="deleteUser()">删除</button></td>
				</tr>
				<tr id="demo" style="display: none;">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td><button class="delete" onclick="deleteUser()">删除</button></td>
				</tr>
			</tbody>
		</table>
		
		<form id="myForm">
			ID:<input id="id" type="text" name="id" value="7"/>
			<br>
			姓名:<input id="uname" type="text" name="uname" value="里斯"/>
			<br>
			性别:<input id="gender" type="text" name="gender" value="女" />
			<br>
			专业:<input id="major" type="text" name="major" value="计算机" />
			<br>
			<button id="sub" type="button" onclick="addUser()">提交</button>
		</form>
	</body>
</html>

<script src="jquery.min.js"></script>   <!-- 安装Jquery -->
<script>
	//添加用户
	function addUser(){
		//创建一个newUser来存放获取到的id，uname，gender，major数据
		let newUser ={
			
		}
		
		// 获取数据,并把数据放到newUSer中
		newUser.id = $("#id").val();
		newUser.name = $("#uname").val();
		newUser.gender = $("#gender").val();
		newUser.major = $("#major").val();
				
		let line = $("#demo").clone().removeAttr("id");
		$(line).children("td:eq(0)").text(newUser.id);
		$(line).children("td:eq(1)").text(newUser.name);
		$(line).children("td:eq(2)").text(newUser.gender);
		$(line).children("td:eq(3)").text(newUser.major );
		$(line).children("td:eq(4)");
		$(line).insertBefore("#demo").fadeIn(3000);	
					
	}
	
	//删除用户
	function deleteUser(){
		let deleteline = event.target.parentNode.parentNode;
		$(deleteline).remove();
	}
		
	</script>

Frost__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 练习（1）

JQuery 练习（1）开发一个基于jQuery框架的前端交互网页，要求如下：1.开发一个表格，表头有 ID、姓名、性别、专业、操作五个字段，表身内容为空2.开发一个表单，可分别填入ID、姓名、性别、专业四项数据，使用一个按钮提交数据3. 表单数据提交后增加到表格的最后一行，且每行的末尾有一个删除按钮，点击删除按钮可以从表格中把当前行删除4.考虑在数据的添加和移除时使用动画效果<!DOCTYPE html><html> <head> <met
复制链接

扫一扫