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>