jquery入门点击添加或者删除员工信息

最新推荐文章于 2023-12-14 22:19:31 发布

msklearn

最新推荐文章于 2023-12-14 22:19:31 发布

阅读量2k

点赞数 2

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/Canon_M/article/details/88091413

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<head>
	<title>习题3</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#box{
			width: 800px;
			height: 600px;
			border:solid 1px;
			margin: 0 auto;
		}
		h3{
			text-align: center;
		}
		#tab{
			width: 100%;
			height: 400px;
		}
	</style>
</head>
<body>
	<div id="box">
		<h3>添加新员工</h3>
		<span>name</span>
		<input type="text" id="name">
		<span>email</span>
		<input type="text" id="email">
		<span>salary</span>
		<input type="text" id= "salary">
		<input type="submit" value="Submit" id="Submit">
		<hr>
		<table border="" cellpadding="0" cellspacing="0" id="tab">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th></th>
			</tr>
			<tr>
				<th>jerry</th>
				<th>jerry@sohu.com</th>
				<th>10000</th>
				<th><a href="#" class="del">delete</a></th>
			</tr>
			<tr>
				<th>bob</th>
				<th>bob@tom.com</th>
				<th>8000</th>
				<th><a href="#">delete</a></th>
			</tr>
			<tr>
				<th>张三</th>
				<th>zhangsan@qq.com</th>
				<th>6000</th>
				<th><a href="#" >delete</a></th>
			</tr>
			

		</table>
	</div>
	<script src = "jquery.min.js"></script>
	<script>
		$(function(){
			$("#Submit").click(function(){
				var name = $("#name").val();
				var email = $("#email").val();
				var sal = $("#salary").val();
				$("#tab").append($("<tr><th>"+name+"</th><th>"+email+"</th><th>"+sal+"</th><th><a href='#'>delete	</th></tr>"));
				$("a").click(function(){
					$(this).parents("tr").remove();
				});
			});
			$("a").click(function(){
				$(this).parents("tr").remove();
			});
		});
	</script>

</body></html>

注意：我用的jquery在同级目录下，版本为1.11.1

msklearn

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jquery入门点击添加或者删除员工信息

&lt;html&gt;&lt;head&gt; &lt;title&gt;习题3&lt;/title&gt; &lt;style&gt; *{ padding: 0; margin: 0; } #box{ width: 800px; height: 600px; border:solid 1px; margin: 0 auto; } ...
复制链接

扫一扫