JJexplode 2023-05-16 08:54 采纳率: 100%
浏览 153
已结题

JavaWeb对话框

制作页面的删除功能时,想要实现点击【删除】弹出确认对话框。目前状态是点击后没有弹出


```Html

                                            <table class="table table-hover text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>种类</th>
                                                        <th>文件名</th>
                                                        <th>图片</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr th:each="photo : ${photo}">
                                                        <td th:text="${photo.name}">商品</td>
                                                        <td th:text="${photo.filename}">earth.jpg</td>
                                                        <td><img
                                                            th:src="@{/uploads/stock/{filename}(filename=${photo.filename})}"
                                                            alt="" width="100px"></td>
                                                        <td>

                                                            <form method="POST" th:action="'./photo_delete&'+${photo.id}" id="delete_1">
                                                                <input type="hidden" name="_token"
                                                                       value="XV7tF73lP1V31unyV3Oxkj2siVujlZtLdM6snqO4"><a th:href="'./photo_delete&'+${photo.id}" class="btn btn-danger js-deleteBtn">删除</a>
                                                            </form>

                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>



    // 获取删除按钮元素
    var deleteBtn = document.querySelector('.js-deleteBtn');

    // 绑定点击事件
    deleteBtn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();

        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗?");

        // 如果用户确认删除,则提交表单
        if (confirmDelete) {
            // 获取表单元素
            var form = document.getElementById('delete_1');
            // 提交表单
            form.submit();
        }
    });

```

  • 写回答

10条回答 默认 最新

  • 语言-逆行者 2023-05-16 10:09
    关注

    在body里面scrip包裹js的内容就行

    img

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=<table class="table table-hover text-nowrap">
            <thead>
                <tr>
                    <th>种类</th>
                    <th>文件名</th>
                    <th>图片</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="photo : ${photo}">
                    <td th:text="${photo.name}">商品</td>
                    <td th:text="${photo.filename}">earth.jpg</td>
                    <td><img
                        th:src="@{/uploads/stock/{filename}(filename=${photo.filename})}"
                        alt="" width="100px"></td>
                    <td>
    
                        <form method="POST" th:action="'./photo_delete&'+${photo.id}" id="delete_1">
                            <input type="hidden" name="_token"
                                   value="XV7tF73lP1V31unyV3Oxkj2siVujlZtLdM6snqO4"><a th:href="'./photo_delete&'+${photo.id}" class="btn btn-danger js-deleteBtn">删除</a>
                        </form>
    
                    </td>
                </tr>
            </tbody>
        </table>, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
             // 获取删除按钮元素
        var deleteBtn = document.querySelector('.js-deleteBtn');
    
    // 绑定点击事件
    deleteBtn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();
    
        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗?");
    
        // 如果用户确认删除,则提交表单
        if (confirmDelete) {
            // 获取表单元素
            var form = document.getElementById('delete_1');
            // 提交表单
            form.submit();
        }
    });
        </script>
    </body>
    </html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(9条)

报告相同问题?

问题事件

  • 系统已结题 5月29日
  • 已采纳回答 5月21日
  • 赞助了问题酬金15元 5月16日
  • 请回答用户的提问 5月16日
  • 展开全部