前臺和後臺就像是女人和男人，男人更多的時候需要處理邏輯預算，在java語言體系下更是如此，
因爲java後臺需要承擔更多的數據處理工作，但是這並不意味着貌美如花的女人什麼事也不幹，有時候她也會處理一部分計算
今天這個案例就完美體現了這一點。
ok，閒話不說，咱們上代碼
首先建立一個web項目，將前臺代碼寫在默認的index.jsp
代碼如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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">
<!-- src是從webcontent開始尋找的，所以沒有那個/ -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// 單擊【新增】按鈕：顯示新增區域
function add(){
$("#addDiv").show();
}
// 點擊新增區域的【保存】按鈕
function save(){
// 隱藏新增區域
$("#addDiv").hide();
// 獲取新增區域的4個屬性值：學號、姓名、性別、年齡
var no = $("#addDiv input:text[name='no']").val();
var name = $("#addDiv input:text[name='name']").val();
var gender = $("#addDiv input:text[name='gender']").val();
var age = $("#addDiv input:text[name='age']").val();
// 將獲取到的屬性值拼接成一個TR字符串
var trHTML = "";
trHTML += "<tr>";
trHTML += "<td>";
trHTML += no;
trHTML += "</td>";
trHTML += "<td>";
trHTML += name;
trHTML += "</td>";
trHTML += "<td>";
trHTML += gender;
trHTML += "</td>";
trHTML += "<td>";
trHTML += age;
trHTML += "</td>";
trHTML += "</tr>";
// 將拼接成的TR字符串追加到表格尾部====
$("table").append(trHTML);
// 清空新增區域所有輸入框的值
$("#addDiv input:text").val("");
}
// 單擊【修改】按鈕
function modify(){
// 獲取選中的TR
var selectedTr = $("input:radio:checked").parent().parent();
// 解析選中的TR，抽取4個屬性值：學號、姓名、性別、年齡
var no = $(selectedTr).find("td:eq(1)").text();
var name = $(selectedTr).find("td:eq(2)").text();
var gender = $(selectedTr).find("td:eq(3)").text();
var age = $(selectedTr).find("td:eq(4)").text();
// 將抽取出的屬性值分別設置給修改區域的4個輸入框
$("#modifyDiv input:text[name='no']").val(no);
$("#modifyDiv input:text[name='name']").val(name);
$("#modifyDiv input:text[name='gender']").val(gender);
$("#modifyDiv input:text[name='age']").val(age);
// 顯示修改區域
$("#modifyDiv").show();
}
// 點擊修改區域的【更新】按鈕
function update(){
// 隱藏修改區域
$("#modifyDiv").hide();
// 獲取修改後的4個屬性值：學號、姓名、性別、年齡
var no = $("#modifyDiv input:text[name='no']").val();
var name = $("#modifyDiv input:text[name='name']").val();
var gender = $("#modifyDiv input:text[name='gender']").val();
var age = $("#modifyDiv input:text[name='age']").val();
// 獲取選中的TR
var selectedTr = $("input:radio:checked").parent().parent();
// 將抽取出的屬性值分別回顯到選中行的4個單元格
$(selectedTr).find("td:eq(1)").text(no);
$(selectedTr).find("td:eq(2)").text(name);
$(selectedTr).find("td:eq(3)").text(gender);
$(selectedTr).find("td:eq(4)").text(age);
}
// 點擊【刪除】按鈕
function deleteStudent(){
// 刪除選中的行
$("input:radio:checked").parent().parent().remove();
}
</script>
<title>Insert title here</title>
</head>
<body>
<div>
<input type="button" value="新增" onclick="add()">
<input type="button" value="修改" onclick="modify()">
<input type="button" value="刪除" onclick="deleteStudent()">
</div>
<div style="margin-top:5px;">
<table border=1 cellpadding=1 cellspacing=0>
<tr>
<th></th>
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td><input type="radio" name="group"></td>
<td>2001</td>
<td>劉寧</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td><input type="radio" name="group"></td>
<td>2002</td>
<td>孫大強</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td><input type="radio" name="group"></td>
<td>2003</td>
<td>錢俊</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td><input type="radio" name="group"></td>
<td>2004</td>
<td>李鑫鵬</td>
<td>男</td>
<td>26</td>
</tr>
</table>
</div>
<div id="addDiv" style="margin-top:10px; display:none;">
<div>學號：<input name="no" type="text"></div><br>
<div>姓名：<input name="name" type="text"></div><br>
<div>性別：<input name="gender" type="text"></div><br>
<div>年齡：<input name="age" type="text"></div><br>
<div><input type="button" value="保存" onclick="save()"></div>
</div>
<div id="modifyDiv" style="margin-top:10px; display:none;">
<div>學號：<input name="no" type="text"></div><br>
<div>姓名：<input name="name" type="text"></div><br>
<div>性別：<input name="gender" type="text"></div><br>
<div>年齡：<input name="age" type="text"></div><br>
<div><input type="button" value="更新" onclick="update()"></div>
</div>
</body>
</html>
結果是以下
