<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var deteFun=function(){
var $trobj=$(this).parent().parent();
var name=$trobj.find("td:first").text();
//confirm是一个确认函数，当用户点击确认。就返回true，否则返回false
if(confirm("你确定要删除"+name+"吗？")){
$trobj.remove();
}
//可以阻止元素的默认行为
return false;
}
//对提交按钮进行添加点击事件
$("#addbtn").click(function(){
var name=$("#empName").val();
var email=$("#email").val();
var salary=$("#salary").val();
var $trobj = $("<tr>"+
"<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
//注意这里的""需要进行转义\
"<td><a href=\"deleteEmp?id=001\">Delete</a></td>"+
"</tr>");
$trobj.appendTo($("#employ"));
//对新添加的进行单击事件
$trobj.find("a").click(deteFun);
});
//给删除的a标签绑定事件
$("a").click(deteFun);//这里引用函数一定不要加()
});
</script>
</head>
<body>
<table border="" cellspacing="" cellpadding="" id="employ">
<tr>
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>123</td>
<td>1000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>234</td>
<td>2000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Cum</td>
<td>456</td>
<td>3000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table border="" cellspacing="" cellpadding="">
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName" value="" />
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email" value="" />
</td>
</tr>
<tr>
<td class="word">Salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addbtn" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
2918
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
