javascript - 使用模态的 Spring Boot 删除操作

Question

我尝试通过每行中的删除按钮删除表中的一些行。当我单击按钮时，会出现一个确认模式，通知用户其操作的结果。当他确认时，该行将从表中删除。在我的代码中，当我单击删除按钮时，在第一行中模态应用来确认该行为，否则不出现它会自动删除，无需任何确认模态。

您能否帮忙确定问题所在，谢谢。

Javascript Code :


$('#btn-delete').on('click', function (e) {
e.preventDefault();
var href =$(this).attr('href');
$('#myModal #btnDelteYes').attr('href',href);
$('#myModal').modal();});

HTML 代码:

<table class="table table-striped">
                    <tr>
                    <th>  </th>
                        <th> xxxx </th>
                        <th>xxx</th>

                        <th>xxx</th>
                        <th>xxx</th>
                        <th>xxx</th>
                        <th>xxx</th>
                    </tr>

                    <tr th:each="o:${listOrdres}">
                    <td style=" padding-top: 0px;"><a id="btn-delete" th:href="@{delete(id=${o.num_ord})}"  class="btn btn-danger">xxx</a></td>




                    <td style=" padding-top: 0px;"><a  th:href="@{edit(id=${o.num_ord})}" class="btn btn-info">xxx</a></td>
                    <td th:text="${o.suj_ord}"></td>

                    <td th:text="${o.dir_ord}"></td>
                    <td th:text="${o.class.simpleName}"></td>
                    <td th:text="${#dates.format(o.dte_ord, 'yyyy-MM-dd')}"></td>
                    <td th:text="${o.num_ord}"></td>


                    </tr>

                    </table>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h3 class="modal-title pull-right" id="myModalLabel">!!!!!!xx</h3>

        </div>
        <div class="modal-body">
             <p class="alert alert-danger pull-right">!!!!!!!! xxx </p>

        </div>

        <div class="modal-footer">
            <a href="" type="button" class="btn btn-danger" id="btnDelteYes">xx</a>
            <button type="button" class="btn btn-default" data-dismiss="modal">xx</button>
        </div>

    </div>

</div>

Answer 1

问题是您正在复制 ids，它应该是唯一的。因此，当您向其添加单击事件时，它只会调用找到的第一个事件，即第一行。请将其更改为类事件，如以下代码。

JS

$('.btn-delete').on('click', function (e) {
    e.preventDefault();
    var href =$(this).attr('href');
    $('#myModal #btnDelteYes').attr('href',href);
    $('#myModal').modal();
});

HTML

<tr th:each="o:${listOrdres}">
    <td style=" padding-top: 0px;"><a th:href="@{delete(id=${o.num_ord})}"  class="btn btn-danger btn-delete">xxx</a></td>
    <td style=" padding-top: 0px;"><a  th:href="@{edit(id=${o.num_ord})}" class="btn btn-info">xxx</a></td>
    <td th:text="${o.suj_ord}"></td>
    <td th:text="${o.dir_ord}"></td>
    <td th:text="${o.class.simpleName}"></td>
    <td th:text="${#dates.format(o.dte_ord, 'yyyy-MM-dd')}"></td>
    <td th:text="${o.num_ord}"></td>
</tr>