<%@ page language="java" import="java.util.*" 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">
<html>
<head>
<base href="<%=basePath%>">
<title>lattice</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<script src="<%=path %>/static/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<%-- <script src="<%=path %>/static/jquery-3.1.1.js" type="text/javascript"></script> --%>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//alert("111");
var url="<%=path%>/test/lattice";
var args={"name":"lattice","age":18};
$.post(url,args,function(data){//以post方式使用ajax來從後臺獲取學生信息
$(".tr1").remove();//在每次獲取學生信息之前移除所有展示學生信息的行，防止重複展示
$.each(data,function(index,item){//遍歷獲取到的學生信息List
$("#t1").append("<tr class='tr1'><td><input class='cs' name='cs' type='checkbox'><input type='hidden' value='"+item.s_id+"'></td>"+
"<td>"+item.s_name+"</td><td>"+item.s_age+"</td><td>"+item.s_msg+"</td>"+
"<td><input type='button' class='delbtn' οnclick='deleteTr("+item.s_id+")' value='刪除'></td></tr>");
});
});
});
$("#ck1").click(function(){//表格第一行表頭的CheckBox實現全選和反全選（表格中所有CheckBox跟表頭選中狀態一致）
if($("#ck1")!=null){
//alert(this.checked);
$(".cs").attr("checked",this.checked);
}
});
$("#btn2").click(function(){
var check=$(".cs:checked");
var checkList="";
$.each(check,function(){
//alert($(this).next("input:hidden").val());
checkList+=$(this).next("input:hidden").val()+",";
});
//alert(checkList);
var url="<%=path%>/test/deletePl";
var args={"name":"lattice","age":18,"deleteList":checkList};
$.post(url,args,function(data){
$(".tr1").remove();
$.each(data,function(index,item){
$("#t1").append("<tr class='tr1'><td><input class='cs' name='cs' type='checkbox'><input type='hidden' value='"+item.s_id+"'></td>"+
"<td>"+item.s_name+"</td><td>"+item.s_age+"</td><td>"+item.s_msg+"</td>"+
"<td><input type='button' class='delbtn' οnclick='deleteTr("+item.s_id+")' value='刪除'></td></tr>");
});
});
});
});
//表格內部刪除按鈕的處理，因爲這些表格內部的刪除按鈕是動態生成的，無法再文檔加載完成時給其綁定點擊事件，所以給其指定刪除方法，同時拿到操作的學生id
function deleteTr(id){
//alert(id);
//彈出當前刪除按鈕同級的hidden標籤的value
//alert($(obj).next("input:hidden").val());
var url="<%=path%>/test/deletePl";
var args={"name":"lattice","age":18,"deleteList":id};
$.post(url,args,function(data){
$(".tr1").remove();
$.each(data,function(index,item){
$("#t1").append("<tr class='tr1'><td><input class='cs' name='cs' type='checkbox'><input type='hidden' value='"+item.s_id+"'></td>"+
"<td>"+item.s_name+"</td><td>"+item.s_age+"</td><td>"+item.s_msg+"</td>"+
"<td><input type='button' class='delbtn' οnclick='deleteTr(this)' value='刪除'><input type='hidden' value='"+item.s_id+"'></td></tr>");
});
});
}
</script>
<body>
This is my lattice page. <br>
<input type="button" id="btn1" value="獲取所有學生信息">
<br>
<table id="t1" border="1" style="border:1px solid #00aaff;">
<tr>
<td><input id="ck1" type="checkbox"></td>
<td>姓名</td>
<td>年齡</td>
<td>信息</td>
<td>操作</td>
</tr>
</table>
<br>
<input type="button" id="btn2" value="刪除選中學生信息">
</body>
</html>
![]()
