0415-批量删除操作
关于删除的全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<srcipt src="js/jquery.cookie.min.js"></script>
<script src="js/student.js" defer></script>
<style type="text/css">.page{display:flex;margin-left:-40px;}.page li{list-style:none;border:1px solid #444;font-size:14px;padding:5px;cursor:pointer;margin-right:5px;}.page li.current{background:#444;color:#fff;}
</style></head>
<body>
<input type='button' value='添加'' class='add'>
<input type='button' value='批量删除' class='deteleMore'><table border='1'><thead><tr><th><input type='checkbox' class='checkAll'></th><th>id</th><th>name</th><th>age</th><th>sex</th><th>操作</th></tr></thead><tbody></tbody></table><!--<div class='addModel'>姓名:<input type='text' class='addName'><br>性别:<input type='text' class='addSex'><br>年龄:<input type='text' class='addAge'><br><input type='button' value="添加" class='addBtn'><input type='button' value="取消" class='back'></div> --><ul class="page"></ul></body>
</html>//查找学生
var page=1
var pageSize=6
var loadData=function(){$.ajax({url:"SearchServlett",type:"get",data:{page,pageSize},success:function(value){var arr = value.data$("tbody").empty()for(var i=0;i<arr.length;i++){$("tbody").append("<tr>"+"<th><input type='checkbox' class='delitem' index='"+arr[i].id+"'></th>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].name+"</td>"+"<td>"+arr[i].age+"</td>"+"<td>"+arr[i].sex+"</td>"+"<td><input type='button' value='修改 ' class='update' index='"+arr[i].id+"'> <input type='button' value='删除' class='delete' index='"+arr[i].id+"'> </td>"+"</tr>")}},error:function(){alert("出错啦！")},})
}
loadData()
//加载页码
$.ajax({url:"GetCountServlet",type:"get",success:function(value){$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(value.num/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("出错啦！")},
})
//任意页码切换
$(".page").on("click",".item",function(){//数据切换page=$(this).text()loadData()//样式切换$(this).addClass("current")$(this).siblings().removeClass("current")
})
//首页
$(".page").on("click",".first",function(){//数据切换page=1loadData()//样式切换$(".item").removeClass("current")$(".item").first().addClass("current")
})
//尾页
$(".page").on("click",".last",function(){//数据切换page=$(".item").lengthloadData()//样式切换$(".item").removeClass("current")$(".item").last().addClass("current")
})//上一页切换
$(".page").on("click",".prev",function(){if(page==1){alert("已经是第一页啦！")return}//数据切换page--loadData()//样式切换//.eq() 方法用于从匹配的元素集合中获取指定索引位置的元素$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})//下一页切换
$(".page").on("click",".next",function(){if(page==$(".item").length){alert("已经是最后一页啦")return}//数据切换page++loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")})//批量删除
$(".deteleMore").on("click",function(){// 初始化一个空字符串，用于存储选中的id（格式如："1,2,3"）var ids="";//$(".delItem:checked")选择所有 被勾选的复选框（class为 delItem 且状态为 checked 的元素）//循环拿到index的值，// 遍历所有被选中的复选框for(var i=0;i<=$(".delitem:checked").length-1;i++){// 如果是最后一个选中的元素，不加逗号if(i==$(".delitem:checked").length-1){ids+=$(".delitem:checked").eq(i).attr("index")}else{ids+=$(".delitem:checked").eq(i).attr("index")+","}}if(ids.length==0){alert("请至少删除一项")return }//弹出确认对话框，防止误操作。if(confirm("确定删除？")){$.ajax({url:"DeteleMoreServlet",type:"post",data:{ids},success:function(value){alert(value)location.reload()},error:function(){alert("出错啦")}})}else{alert("未执行删除操作")}
})
//全选
$(".checkAll").on("click",function(){//.prop() DOM元素的当前属性（property） 动态值（如 checked, disabled, selected）//.attr() HTML标签的原始属性（attribute） 静态值（如 id, class, data-*） 检查全选复选框（class="checkAll"）是否被勾选if($(".checkAll").prop("checked")){// // 如果全选按钮被勾选，将所有单项复选框（class="delItem"）设置为勾选状态$(".delitem").prop("checked",true)}else{// // 如果全选按钮取消勾选，将所有单项复选框（class="delItem"）设置为未勾选状态$(".delitem").prop("checked",false)}
})
//反选
$("tbody").on("click",".delitem",function(){var flag=truefor(var i=0;i<=$(".delitem").length-1;i++){flag=flag & $(".delitem").eq(i).prop("checked")}if(flag){$(".checkAll").prop("checked",true)}else{$(".checkAll").prop("checked",false)}
})//添加小模块呈现
$(".add").click(function(){//页面跳转location.href="add.html";
})//修改小模块回显+信息在小模块复现
//未来元素:HTML里没有，在js里追加的元素 传入包含未来元素的HTML元素
$("tbody").on("click",".update",function(){$.cookie("id",$(this).attr("index"));location.href="update.html";
})
//删除
$("tbody").on("click",".delete",function(){var id = $(this).attr("index")$.ajax({url:"DeleteServlet",type:"post",data:{id},success:function(value){alert(value)location.reload()},error:function(){alert("出错啦")},})
})package com.qc.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qc.db.MysqlUtil;/*** Servlet implementation class DeteleMoreServlet*/
@WebServlet("/DeteleMoreServlet")
public class DeteleMoreServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public DeteleMoreServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String ids=request.getParameter("ids");String sql="delete from student where id in("+ids+")";int num=MysqlUtil.del(sql);String res="删除失败";if(num>0) {res="删除成功";}response.setCharacterEncoding("utf-8");response.getWriter().write(res);}}