<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现插入删除信息</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function (){
//删除员工信息
function removeTr(aNode){
var $tr = $(aNode).parent().parent();
var tdText = $tr.find("td:first").text();
tdText = $.trim(tdText);
var flag = confirm("你确定删除"+tdText+"的信息?");
if(flag){
$tr.remove();
}
return false;
}
//添加用工信息到表格中
$(":submit").click(function (){
$("<tr></tr>").append("<td>" +$(":text[name='name']").val()+ "</td>")
.append("<td>" +$(":text[name='email']").val()+ "</td>")
.append("<td>" +$(":text[name='salary']").val()+ "</td>")
.append("<td><a href='delete'>Delete</a></td>")
.appendTo("table")
.find("a")//查找所有a标签并为其添加点击事件
.click(function (){
return removeTr(this);
});
});
});
</script>
</head>
<body>
name:<input type="text" name="name" />
email:<input type="text" name="email" />
salary:<input type="text" name="salary" />
<input type="submit" value="添加" />
<br/><br/>
<hr>
<br/>
<table border="1" cellpadding="5" cellspacing="0" width="600">
<tr>
<th>name</th>
<th>email</th>
<th>salary</th>
<th>option</th>
</tr>
</table>
</body>
</html>
