提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js 多选选择删除数据

JS数据 删除 选择 多选
2023-09-11 14:18:04 时间

按了顶上的删除(多项删除)

单列复选框删除 js语句

1 <a href="javascript:delOne('${customer.id}')">删除</a></td>
 1 <script type="text/javascript">
 2     function delOne(customerId)
 3     {
 4         var sure=window.confirm("确定删除么?");
 5         if(sure)
 6         {
 7             window.location.href="${pageContext.request.contextPath}/DelCustomerServlet?customerId="+customerId;　　　　　　//客户端转向servlet用于删除数据
 8         }
 9     }
10 </script>

 

多列复选框删除js语句

先在table外套个form表单 并且指定id,其中给复选框指定name 和 value

<td><input type="checkbox" name="ids" value="${customer.id}"/></td>

1     <form action="${pageContext.request.contextPath }/DelCustomerServlet?method=delMultiple" id="form" method="post">
2     <table >
3     ............
4     </table>
5     </form>
 1     <script type="text/javascript">    
 2     function delMultiple()
 3     {
 4         var ids=document.getElementsByName("ids");
 5         var selected=false;
 6         for(var i=0;i<ids.length;i++)
 7         {
 8             if(ids[i].checked)
 9             {
10                 selected=true;
11                 break;
12             }
13         }
14         if(selected)
15         {
16             var sure=window.confirm("确定删除所选记录么?");
17             if(sure)
18             {
19                 document.getElementById("form").submit();
20             }
21         }
22         else
23             {
24                 alert("请先选择要删除的记录");
25             }
26         
27     }
28     </script>

参考

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 4 <%@taglib uri="http://www.WFReduceContent.com" prefix="reduce"%>
 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 6 <html>
 7 <head>
 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 9 <title>Insert title here</title>
10 </head>
11 <body>
12     <form action="${pageContext.request.contextPath }/DelCustomerServlet?method=delMultiple" id="form" method="post">
13     <table >
14         <tr>
15             <th><a href="${pageContext.request.contextPath}/HandleDispatchServlet?method=toAddCustomer">添加</a></th>
16             <th><a href="javascript:delMultiple()">多重删除</a></th>
17         </tr>
18     </table>
19     <table align ="center" cellpadding="5" border="4" >
20     <tr>
21         <th>选择</th>
22         <th>姓名</th>
23         <th>性别</th>
24         <th>生日</th>
25         <th>电话</th>
26         <th>email</th>
27         <th>爱好</th>
28         <th>类型</th>
29         <th>描述</th>
30         <th>操作</th>
31     </tr>
32         <c:forEach var="customer" items="${requestScope.customerList }" varStatus="status">
33         <tr bgcolor="${status.index%2==0?'red':'gray' }">
34                 <td><input type="checkbox" name="ids" value="${customer.id}"/></td>
35                 <td>${customer.name}</td>
36                 <td>${customer.gender=="1"?"男":"女"}</td>
37                 <td>${customer.birthday}</td>
38                 <td>${customer.cellphone}</td>
39                 <td>${customer.email}</td>
40                 <td>${customer.hobby}</td>
41                 <td>${customer.type}</td>
42                 <td><reduce:reduceContent value="${customer.description}"/> </td>
43                 <td><a href="${pageContext.request.contextPath}/HandleDispatchServlet?method=editCustomer&customerId=${customer.id}">编辑</a>
44                 <a href="javascript:delOne('${customer.id}')">删除</a></td>
45         </tr>
46         </c:forEach>
47     </table>
48     <script type="text/javascript">
49     function delOne(customerId)
50     {
51         var sure=window.confirm("确定删除么?");
52         if(sure)
53         {
54             window.location.href="${pageContext.request.contextPath}/DelCustomerServlet?customerId="+customerId;
55         }
56     }
57     function delMultiple()
58     {
59         var ids=document.getElementsByName("ids");
60         var selected=false;
61         for(var i=0;i<ids.length;i++)
62         {
63             if(ids[i].checked)
64             {
65                 selected=true;
66                 break;
67             }
68         }
69         if(selected)
70         {
71             var sure=window.confirm("确定删除所选记录么?");
72             if(sure)
73             {
74                 document.getElementById("form").submit();
75             }
76         }
77         else
78             {
79                 alert("请先选择要删除的记录");
80             }
81         
82     }
83     </script>
84     </form>
85 </body>
86 
87 </html>
View Code
 1 package cn.itcast.Controller;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.annotation.WebServlet;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 import cn.itcast.service.CustomerService;
11 import cn.itcast.service.impl.CustomerServiceImpl;
12 
13 public class DelCustomerServlet extends HttpServlet {
14     private static final long serialVersionUID = 1L;
15     private CustomerService service= new CustomerServiceImpl();
16     public DelCustomerServlet() {
17         super();
18     }
19 
20     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
21         String method=request.getParameter("method");
22         if("delMultiple".equals(method))            //多重删除
23         {
24             String ids[]=request.getParameterValues("ids");
25             if(null!=ids&&ids.length>0)
26                 for(String id:ids)
27                     service.delCustomerById(id);
28             request.getRequestDispatcher("ShowAllCustomer").forward(request, response);
29             return;
30         }
31         //单条删除
32         String customerId=request.getParameter("customerId");
33         System.out.println( "servlet"+customerId);
34         service.delCustomerById(customerId.trim());
35         request.getRequestDispatcher("ShowAllCustomer").forward(request, response);
36     }
37     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
38         this.doGet(request, response);
39     }
40 
41 }
View Code

 

相关文章