表格中刪除選中的操作

一、前言

最近在做Javaweb的練習，有一個需求是刪除表格中勾選的數據，這時需要獲取哪個復選框是勾選的， 並提交到servlet中才能調用方法刪除，如圖

二、思路

在這里可以將整個表格外邊加上一個form標簽，把表格變成表單，這時就有了表單自帶的action屬性，就能提交數據到servlet中了。再在servlet中獲取所有勾選的復選框就能調用方法進行刪除了。

三、實現

jsp頁面，在jsp頁面中用了jstl標簽來動態添加表格行數

<form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th><input type="checkbox" id="firstCb"></th>
                <th style="text-align: center">編號</th>
                <th style="text-align: center">姓名</th>
                <th style="text-align: center">性別</th>
            </tr>
            <c:forEach items="${pb.list}" var="user" varStatus="s">
                <tr align="center">
                    <%--復選框中name設置為uid，value值設置為用戶的id，可根據id在數據庫中刪除--%>
                    <th><input type="checkbox" name="uid" value="${user.id}"></th>
                    <td>${s.count}</td>
                    <td>${user.name}</td>
                    <td>${user.gender}</td>
                </tr>
            </c:forEach>
        </table>
    </form>

點擊刪除選中按鈕提交表單我使用js代碼來實現，並且為了防止沒有勾選復選框點刪除選中按鈕出現空指針異常，在js里判斷必須有勾選才會提交表單。

//給刪除選中按鈕添加單擊事件
            document.getElementById("delSelected").onclick = function () {
                if (confirm("您確定要刪除選中條目嗎？")) {
                    var flag = false;
                    //判斷是否有選中條目
                    var cbs = document.getElementsByName("uid");
                    for (i = 0; i < cbs.length; i++) {
                        if (cbs[i].checked) {
                            flag = true;
                            break;
                        }
                    }
                    if (flag) {//有選中條目，再提表單
                        document.getElementById("form").submit();
                    }
                }
            }

把表單提交到servlet中了，就獲取勾選復選框的屬性值，根據屬性值操作數據庫刪除了

public class DelSelectedServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.獲取所有勾選的id
        String[] ids = request.getParameterValues("uid");
        //2.調用service刪除，將勾選的復選框所對應的id數組傳過去，操作數據庫進行刪除
        UserService service = new UserServiceImpl();
        service.delSelectedUser(ids);
        //跳轉界面
        response.sendRedirect(request.getContextPath()+"/userListServlet");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}