Actualizar un registro II
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD con Bootstrap y JavaScript</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<table id="tablaDatos" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Registro</th>
<th>PDF</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<!-- Aquí se cargarán los datos dinámicamente -->
</tbody>
</table>
</div>
<!-- Modal para la edición -->
<div id="modalEditar" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Editar Registro</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="formularioEditar">
<input type="hidden" name="id" id="editId">
<div class="form-group">
<label for="editPDF">PDF:</label>
<input type="text" class="form-control" id="editPDF" name="editPDF">
</div>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS y jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
const datos = [
{
id: 1,
registro: 'Registro 1',
pdf: '',
},
{
id: 2,
registro: 'Registro 2',
pdf: '',
}
];
// Función para cargar los datos en la tabla
function cargarDatos() {
const tablaBody = document.querySelector("#tablaDatos tbody");
tablaBody.innerHTML = ""; // Limpiar la tabla antes de cargar los datos
datos.forEach(dato => {
const fila = `
<tr>
<td>${dato.id}</td>
<td>${dato.registro}</td>
<td>${dato.pdf}</td>
<td><button class="btn btn-primary" onclick="abrirModalEditar(${dato.id})">Editar</button></td>
</tr>
`;
tablaBody.innerHTML += fila;
});
}
// Función para abrir la modal de edición
function abrirModalEditar(id) {
const modal = document.getElementById("modalEditar");
$(modal).modal('show'); // Mostrar modal usando jQuery
// Buscar el dato correspondiente al ID
const dato = datos.find(item => item.id === id);
// Llenar los campos de la modal con los datos del elemento seleccionado
document.getElementById("editId").value = dato.id;
document.getElementById("editPDF").value = dato.pdf;
}
// Cuando se envía el formulario de edición
document.getElementById("formularioEditar").addEventListener("submit", function(event) {
event.preventDefault(); // Prevenir el comportamiento por defecto del formulario
// Obtener los valores del formulario
const id = document.getElementById("editId").value;
const pdf = document.getElementById("editPDF").value;
// Actualizar los datos correspondientes al ID
const datoIndex = datos.findIndex(item => item.id === parseInt(id));
if (datoIndex !== -1) {
datos[datoIndex].pdf = pdf;
}
// Imprimir valores del formulario en la consola
console.log("ID:", id);
console.log("PDF editado:", pdf);
// Ocultar modal
const modal = document.getElementById("modalEditar");
$(modal).modal('hide');
// Recargar datos en la tabla
cargarDatos();
});
// Cargar los datos al cargar la página
cargarDatos();
</script>
</body>
</html>
Comentarios
Publicar un comentario