Tengo una página web que enumera varias filas en una tabla. Cada fila tiene un botón que se usa para abrir un modal de confirmación si el usuario desea eliminar la fila.
¿Hay alguna forma de pasar la información de la fila (índice o algo así) al elemento del botón de envío que está fuera del elemento de la tabla y que ejecuta la función de eliminación real?
Sé que <input type="button" value="Delete" onclick="deleteRow(this)"/> haría el truco si está dentro del elemento tr, pero este no es el caso.
Mi código HTML:
<table id="myTable"> <tr> <th><fmt:message key="time"/></th> <th><fmt:message key="name"/></th> </tr> <c:forEach items="${myList}" var="item"> <tr> <td>${item.timeStamp}</td> <td>${item.name}</td> <td><input type="button" onclick="openModal"/>Delete</td> //here I want to store this rows index <tr> </c:forEach> </table> <div class="modal-container" id="modal_container"> <div class="modal"> <p>Do you want to remove item?</p> <button type="button" id="close">Cancel</button> <button type="submit" id="remove" onclick="deleteRow(this)">Yes</button> //here I want to use the stored index </div> </div>Nunca usé Jsp pero puedes probar algo como esto (vainilla javascript):
var form = window.querySelector('#myTable'); var buttonSubmit = window.querySelector('#remove'); // Events buttonSubmit.addEventListener('click', submitMe); form.addEventListener('submit', submitMe); // Submit function function submitMe(e) { e.preventDefault(); // 'Revoke' current action of the event (use to stop input submit request) const formData = new FormData(form); formData.append('CustomKey', 'CustomValue'); // Send new XMLHttpRequest here }Algunos documentos:
Necesita valor global para guardar la fila:
var row;luego la función para abrir el modal y guardar la fila:
// When the user clicks on the button, open the modal and save the row let openModal = function(scope) { modal.style.display = "block"; row = scope; }y luego la función para eliminar la fila si el usuario presiona sí:
// When the user clicks on the yes button, delete the row, close the modal and reset row function deleteRow() { var parent = row.parentNode.parentNode; parent.parentNode.removeChild(parent); row = ""; modal.style.display = "none"; }Su botón debería abrir el cuadro de diálogo modal.
<td><input type="button" onclick="openModal(this)"/></td>y si el usuario presiona sí, llama a la función de eliminación
<!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <p>Do you want to remove item?</p> <button type="submit" id="remove" onclick="deleteRow()">Yes</button> </div> </div>en mi página de codepen resolví esto por ti.