jQuery表格添加删除记录

最新推荐文章于 2023-05-29 09:49:05 发布

杪＆秋

最新推荐文章于 2023-05-29 09:49:05 发布

阅读量286

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_51435825/article/details/128275453

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格添加删除记录</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#addstudent').click(function(){
				var $name=$('#name');
				var $email=$('#email');
				var $score=$('#score');
				var name=$name.val();
				var email=$email.val();
				var score=$score.val();
				
				var tr=$('<tr></tr>')
				 .append('<td>'+name+'</td>')
				 .append('<td>'+email+'</td>')
				 .append('<td>'+score+'</td>')
				 .append('<td><a href="deleteStudent?id="'+Date.now()+'>删除</a></td>')
				 .appendTo('#student>tbody')
				 
				 //清除输入
				 $name.val('');
				 $email.val('');
				 $score.val('');
				});
				
				//事件委托
				$('#student').delegate('a','click',clickDelete);
				function clickDelete(){
					
					var $tr=$(this).parent().parent();
					var name=$tr.children(':first').html();
					if(confirm('确定删除'+name+'吗?')){
						$tr.remove();
					}
					//阻止跳转;	
					return false;
				}
				
			});
		</script>
	</head>
	<body>
		<table id="student" border="1">
			<tr>
				<th>name</th>
				<th>email</th>
				<th>score</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>liayin</td>
				<td>25952312@qq.com</td>
				<td>90</td>
				<td><a href="deleteStudent?id=1">删除</a></td>
			</tr>
			<tr>
				<td>miounet</td>
				<td>25952312@qq.com</td>
				<td>90</td>
				<td><a href="deleteStudent?id=1">删除</a></td>
			</tr>
			<tr>
				<td>lucy</td>
				<td>25952312@qq.com</td>
				<td>90</td>
				<td><a href="deleteStudent?id=1">删除</a></td>
			</tr>
			<tr>
				<td>jack</td>
				<td>25952312@qq.com</td>
				<td>90</td>
				<td><a href="deleteStudent?id=1">删除</a></td>
			</tr>
		</table>
		<hr >
		<table border="1">
			<tr>
				<td>姓名:</td>
				<td>
					<input type="text" name="name" id="name" value="" />
				</td>
			</tr>
			<tr>
				<td>邮箱:</td>
				<td>
					<input type="text" name="email" id="email" value="" />
				</td>
			</tr>
			<tr>
				<td>成绩:</td>
				<td>
					<input type="text" name="score" id="score" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<button id="addstudent" value="">添加</button>
				</td>
			</tr>
		</table>
	</body>
</html>