关于删除的全部代码：
<!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=1
loadData()
//样式切换
$(".item").removeClass("current")
$(".item").first().addClass("current")
})
//尾页
$(".page").on("click",".last",function(){
//数据切换
page=$(".item").length
loadData()
//样式切换
$(".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=true
for(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 stub
response.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);
}
}
![[连载]Transformer架构详解](https://i-blog.csdnimg.cn/direct/5c0929e48f7f41a498455d295488e37a.png)
