在javaweb项目中用js来实现删除选中的功能

Dear 丶 2024-04-01 17:38 44阅读 0赞

下面我们用一个案例来讲解一下删除选中功能怎么实现

1.首先我们看一下前台原始的静态页面

2.首先展示一下上面html前台页面的网页模型

![b073b8a63e9b420f87981b1fe08e5185.png][]

3.我们是使用javaweb的知识实现项目数据的展示，把从数据库查询到的数据加载到jsp页面，利用的是标签库里的foreach标签来完成，下图是实现好的html页面

<form name="form1" id="form" action="${pageContext.request.contextPath}/deleteUserByIdServlet" method="post">
        <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
    
            <tr>
                <td height="20" bgcolor="#FFCF60"><div align="center" class="style1">用户管理</div></td>
            </tr>
            <tr>
                <td  bgcolor="#666666"><table width="600" border="0" align="center" cellpadding="0" cellspacing="1">
                    <tr>
                        <td width="224" bgcolor="#FFFFFF" align="center">
                            <input type="checkbox" align="center" id="firstCb">
                        </td>
                        <td width="224" height="20" bgcolor="#FFFFFF">
                            <div align="center">用户昵称</div>
                        </td>
                        <td width="93" bgcolor="#FFFFFF">
                            <div align="center">用户状态</div>
                        </td>
                        <td width="75" bgcolor="#FFFFFF">
                            <div align="center">查看信息</div>
                        </td>
    
                    </tr>
                    <c:forEach items="${list}" var="user">
                    <tr>
                        <td height="20" bgcolor="#FFFFFF">
                            <div align="center"><input type="checkbox" name="uid" value="${user.id}"></div>
                        </td>
                        <td height="20" bgcolor="#FFFFFF">
                            <div align="center">${user.name}</div>
                        </td>
                        <td height="20" bgcolor="#FFFFFF">
                            <div align="center">${user.state}</div>
                        </td>
                        <td height="20" bgcolor="#FFFFFF">
                            <div align="center">
                                <a href="${pageContext.request.contextPath}/findByUserIdServlet?id=${user.id}"><img src="images/button_select.png" width="14" height="13" border="0"></a>
                            </div>
                        </td>
                    </tr>
                    </c:forEach>
                </table>
                </td>
            </tr>
        </table>
        <br>
        <table width="600" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td align="right">
                    <a href="javascript:void(0)" id="delSelected"><input type="button" value="删除选项" class="buttoncss"></a>
                </td>
            </tr>
        </table>
    </form>

4.下面我们看一下数据的展示页面

![92f4515cdd4b411a97fa9715e89394c3.png][]

5.接下来实现删除选中的功能

在这个form表单标签中使用el表达式写上，当你选中的要删除的条目，就会跳转对应的删除类，在这里我们的删除选中按钮需要与选中框，有一个绑定的关系，并且删除需要有提示，不然会报错空指针异常，功能实现代码，如下图所示

6.删除的选中头目是不是，选中第一个就所有都是被选中的，实现该功能如下图所示

这些代码在上面的代码中都有，只是提取出来看的比较详细，用js实现选中一个全选的功能代码如下图所示

删除跳转的servlet类，接受的参数是uid，并且接收应该是数组类型的值，因为可能删除的条目不止一条，使用的接受方法为request.getParameterValues("uid"); 删除的功能实现 我相信你可以完成的，相信你自己，实在不行滴滴我。

最终就实现了

[b073b8a63e9b420f87981b1fe08e5185.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/63acb3abfbe5445488aca994aeb7e274.png
[92f4515cdd4b411a97fa9715e89394c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/714096beacfe48c29820eaadfc2e90c6.png