1.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
//删除行
$("#employeetable a").click(function(){
return removeTr(this);
}); //添加行
$("#addEmpButton").click(function(){
$("<tr></tr>").append("<td>"+$("#name").val()+"</td>")
.append("<td>"+$("#email").val()+"</td>")
.append("<td>"+$("#salary").val()+"</td>")
.append("<td><a href='deleteEmp?id=001'>Delete</a></td>")
.appendTo("#employeetable tbody")
.find("a").click(function(){
return removeTr(this);
})
}) //公共函数
function removeTr(anode){
var $trnode=$(anode).parent().parent();
var textContext=$trnode.find("td:first").text();
textContext=$.trim(textContext);
var flag=confirm("要删除"+textContext+"?");
if(flag){
$trnode.remove()
}
return false;
} })
</script>
</head>
<body>
<center>
<br> <br>
添加新员工 <br> <br>
name: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
salary: <input type="text" name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button> <br> <br><hr><br><br> <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>
Jerry
</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
2.效果
