如何获取JSP页面中动态创建的删除按钮的触发动作？

要处理这些动态生成的删除按钮，核心是要让后端知道你点击的是对应哪个emailID的按钮，下面给你两种常用的实现方式，按需选择：

方法1：每行一个独立表单（传统JSP同步提交） #

这种方式最简单直接，给每一行的删除按钮单独套一个表单，通过隐藏字段传递对应的emailID：

<table border=0>
    <% while(rs.next()) { 
        String email = rs.getString("emailID");
    %>
    <tr>
        <td><h3><font color="blue"><b><%= email %> </b></font></h3></td>
        <td width="70%"></td>
        <td>
            <!-- 每行一个表单，提交到处理删除的后端路径（比如deleteEmail.jsp或对应Servlet） -->
            <form action="deleteEmail.jsp" method="POST">
                <!-- 隐藏字段存储当前行的emailID -->
                <input type="hidden" name="emailToDelete" value="<%= email %>">
                <h3><input type="submit" value="delete"></h3>
            </form>
        </td>
    </tr>
    <% } %>
</table>

之后在deleteEmail.jsp（或你的后端处理页面）里，就可以通过request.getParameter("emailToDelete")拿到要删除的邮箱ID，接着执行对应的数据库删除逻辑即可。

方法2：单表单+JavaScript/AJAX（无刷新删除） #

如果想要页面不刷新的流畅体验，可以用一个主表单配合JS监听按钮点击，获取对应emailID后发送AJAX请求：

JSP部分： #

<table border=0>
    <% while(rs.next()) { 
        String email = rs.getString("emailID");
    %>
    <tr>
        <td><h3><font color="blue"><b><%= email %> </b></font></h3></td>
        <td width="70%"></td>
        <td>
            <!-- 用button类型，通过data属性存储对应emailID -->
            <h3><button type="button" class="deleteBtn" data-email="<%= email %>">delete</button></h3>
        </td>
    </tr>
    <% } %>
</table>

JavaScript部分（放在页面底部或单独JS文件）： #

// 获取所有删除按钮
const deleteButtons = document.querySelectorAll('.deleteBtn');

deleteButtons.forEach(btn => {
    btn.addEventListener('click', function() {
        const emailToDelete = this.getAttribute('data-email');
        
        // 弹出确认框（可选，提升用户体验）
        if(confirm(`确定要删除邮箱 ${emailToDelete} 吗？`)) {
            // 发送AJAX请求到后端
            fetch('deleteEmail.jsp', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `emailToDelete=${encodeURIComponent(emailToDelete)}`
            })
            .then(response => response.text())
            .then(data => {
                // 删除成功后，即时移除页面上对应的行
                this.closest('tr').remove();
                alert('删除成功！');
            })
            .catch(error => {
                console.error('删除出错:', error);
                alert('删除失败，请重试');
            });
        }
    });
});

这种方式点击按钮后不会刷新页面，完成删除后还能直接移除页面上的目标行，体验更流畅。

重要提示： #

不管用哪种方式，后端处理时一定要做参数校验，并且用PreparedStatement执行删除操作，避免SQL注入风险。

内容的提问来源于stack exchange，提问作者Suraj