jQuery页面内学生信息增删案例

最新推荐文章于 2020-11-30 20:33:05 发布

二不午

最新推荐文章于 2020-11-30 20:33:05 发布

阅读量981

点赞数 1

分类专栏： JavaWeb 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43151608/article/details/95780661

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

要求：在页面中添加学生的编号、姓名、成绩信息，显示在页面上，并有删除选项可以删除单条信息

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<!--引入jQuery-->
		<script src="../js/jquery-1.11.0.min.js"></script>

	</head>

	<body>

		<!--信息输入框部分-->
		<div align="center">

			<input id="in1" type="text" name="num" placeholder="请输入编号" />
			<input id="in2" type="text" name="name" placeholder="请输入姓名" />
			<input id="in3" type="text" name="grade" placeholder="请输入分数" />
			<input id="add" type="submit" value="添加" />

		</div>

		<h2 align="center">学员信息表</h2>

		<table id="table" align="center" cellpadding="30px">
			<tr id="tr">
				<th>编号</th>
				<th>姓名</th>
				<th>分数</th>
				<th>操作</th>
			</tr>

		</table>

		<script>
			$(function() { //页面内容加载后执行
				$("#add").click(function() {

					var t1 = $("#in1").val(); //获取第一个输入框内容
					var t2 = $("#in2").val(); //获取第二个输入框内容
					var t3 = $("#in3").val(); //获取第三个输入框内容

					//对输入框内容进行拼接
					var tr = "<tr><td>" + t1 + "</td><td>" + t2 + "</td><td>" + t3 + "</td><td οnclick='del(this)'><a href='#'>删除</a></td></tr>"

					$("#table").append(tr); //被选元素后添加内容
					$("#in1").val(""); //添加内容后清空
					$("#in2").val("");
					$("#in3").val("");

				})
			})

			//删除所选内容方法
			function del(a) {

				$(a).parent().remove(); //利用parent()方法，找到操作内容标签的父标签<tr>,然后删除该行内容

			}
		</script>

	</body>

</html>

如图所示：

二不午

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery页面内学生信息增删案例

要求：在页面中添加学生的编号、姓名、成绩信息，显示在页面上，并有删除选项可以删除单条信息<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <script src="....
复制链接

扫一扫