Javascript Spring引导删除操作使用模式

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

您能帮助确定问题所在的位置吗？谢谢

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>

xxxx
xxx
xxx
xxx
xxx
xxx
&时代；
!!!!!!xx
！！！！！！！！xxx
xx

---

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

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>

根据我对您的问题的理解，如果我没有错的话，您的代码在删除用户之前没有给您确认？它只给表中第一行的确认模式非常感谢您的回答，这是一个很好的回答，很高兴我能帮上忙：）