前台和后台就像是女人和男人，男人更多的时候需要处理逻辑预算，在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="新增" οnclick="add()"> <input type="button" value="修改" οnclick="modify()"> <input type="button" value="删除" οnclick="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="保存" οnclick="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="更新" οnclick="update()"></div> </div></body>
</html>
结果是以下
