<!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>