javascript - 如何使用引导模式从数据库中删除或编辑数据

Question

所以我基本上希望能够使用引导模式从数据库中删除学生。删除按钮应生成删除确认模式。到目前为止，我已经能够显示模态但我一直坚持让它真正工作。就像当我点击模态中的“确定”按钮时没有任何反应。我知道它与 javascript 相关但我是一个完全的初学者网络开发。你能帮我吗？（顺便说一句，我几乎尝试了在这里找到的所有解决方案，但没有任何效果。）

这是我的 jsp 文件中包含“删除”按钮的表：

<table class="table table-striped table-hover" >
            <thead>
                <tr>
                    <th>
                        <span class="custom-checkbox">
                            <input type="checkbox" id="selectAll">
                            <label for="selectAll"></label>
                        </span>
                    </th>
                    <th>CNE</th>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Date de Naissance</th>
                    <th>Lieu de Naissance</th>
                    <th>Sexe</th>
                    <th>E-mail</th>
                    <th>N° Tel</th>
                    <th>Semestre</th>

                </tr>
            </thead>
            <tbody>

            <c:forEach items="${model.etudiants}"  var="e">

        <tr class="delete" data-id="${e.numEt }">
            <td>
                        <span class="custom-checkbox">
                            <input type="checkbox" id="checkbox1" name="options[]" value="1">
                            <label for="checkbox1"></label>
                        </span>
                    </td>
                <td><c:out value="${e.numEt}" /></td>
                <td><c:out value="${e.nomEt}" /></td>
                <td><c:out value="${e.prenomEt }" /></td>
                <td><c:out value="${e.dateNaiss}" /></td>
                <td><c:out value="${e.lieuNaiss}" /></td>
                <td><c:out value="${e.sexe}" /></td>
                <td><c:out value="${e.email}" /></td>
                <td><c:out value="${e.numTel}" /></td>
                <td><c:out value="${e.semestre}" /></td>
                <td>

                      <a href="#editEmployeeModal"   class="edit edit_data" id="${e.numEt }" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>  
                        <a href="#deleteEmployeeModal" data-target="deleteEmployeeModal" data-href="/AdministrationBachelor/delete.php?id=${e.numEt}" class="delete"  data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>


                    </td>


                </tr>

            </c:forEach>

            </tbody>
        </table>

删除确认模式：

     <div id="deleteEmployeeModal"  class="modal fade" tabindex="-1" role="dialog">

    <div class="modal-dialog">
        <div class="modal-content">

                <div class="modal-header">                      
                    <h4 class="modal-title">Supprimer Etudiant</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>

                <form method="post" action="delete.php">
                <div class="modal-body">

                      <input type="hidden" name="cne" id="cne" value=""/>               
                    <p>Êtes-vous sûrs de vouloir supprimer ces enregistrements?</p>
                    <p class="text-warning"><small>Cette action ne peut pas être annulée.</small></p>
                </div>

                <div class="modal-footer">
                    <button type="button"   class="btn btn-default" data-dismiss="modal" >Cancel</button> 
                <!--    <button  name="action" id="btnYes" class="btn btn-danger btn-ok" value="delete">Delete</button> -->
                <a class="btn btn-danger btn-ok">Delete</a>
                </div>
                </form>

        </div>

    </div>
</div>

我试过的js代码：

<script>

$('#deleteEmployeeModal').on('click', '.btn-ok', function(e) {
    $(this).find('.btn-ok').attr.('href',$(e.relatedTarget).data('href'));


});

</script>

标签： javascripteclipsejspjakarta-eebootstrap-modal