```language
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>Students</title>
<base th:href="${#servletContext.getContextPath+'/'}">
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () { //$(document).ready(function(){
//delete
function deleteStudents() {
var name = $(this).parents("tr").find("td:eq(1)").text();
var flag = confirm("你确定要删除"+name+"嘛？？");
if(flag){
$(this).parents("tr").remove();
}
return false;
}
$(".del").on("click",deleteStudents);//带()：执行，不带()：赋值
//update
function updateStudents() {
//找同类的父类
$(this).parent().siblings("td").each(function () {
{
var is_text = $(this).find("input:text");
if(!is_text.length){
$(this).html("<input size='13' type='text' value='"+$(this).text()+"'/>" );
}else{
$(this).html(is_text.val());
}
}
})
}
$(".upd").on("click",updateStudents);
//add
function addStudents() {
//获取提交的元素
var id = $("#addId").val();
var name = $("#addName").val();
var age = $("#addAge").val();
$("<tr></tr>").append("<td>"+id+"</td>")
.append("<td>"+name+"</td>")
.append("<td>"+age+"</td>")
.append("<td><a href=‘#'>Delete </a>" +
"<a href=‘#'>Update</a> </td>")
.appendTo("#tab1");
}
$("#addSubmit").on("click",addStudents);
})
</script>
</head>
<body>
<h2 align="center">Students</h2>
<table id="tab1" align="center" border="1" cellspacing="0">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th colspan="2">operate</th>
</tr>
<tr>
<td>13</td>
<td class="name">dongji</td>
<td>16</td>
<td>
<a href="#" class="del">Delete</a>
<a href="#" class="upd">Update</a>
</td>
</tr>
<tr>
<td>14</td>
<td class="name">shangji</td>
<td>16</td>
<td>
<a href="#" class="del">Delete</a>
<a href="#" class="upd">Update</a>
</td>
</tr>
<tr>
<td>19</td>
<td class="name">hengji</td>
<td>16</td>
<td>
<a href="#" class="del">Delete</a>
<a href="#" class="upd">Update</a>
</td>
</tr>
</table>
<div id="div1">
<h3 align="center">Add Students</h3>
<table id="ta2" align="center" border="1" cellspacing="0">
<tr>
<td>id:</td>
<td><input type="text" id="addId"/> </td>
</tr>
<tr>
<td>name:</td>
<td><input type="text" id="addName"/> </td>
</tr>
<tr>
<td>age:</td>
<td><input type="text" id="addAge"/> </td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addSubmit">submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
```
结果
Students
| | | | |
| | | | |
| | | | |
| | | | |
Add Students
| |
| |
| |
| |
结果
