crud-js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD JavaScript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>CRUD JavaScript</h1>
<form id="formulario">
<div class="form-group">
<label for="inputRegistro">Registro</label>
<input type="text" class="form-control" id="inputRegistro" placeholder="Ingrese el registro">
</div>
<div class="form-group">
<label for="inputPDF">PDF</label>
<input type="text" class="form-control" id="inputPDF" placeholder="Ingrese el PDF">
</div>
<button type="submit" class="btn btn-primary">Agregar</button>
</form>
<hr>
<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="editRegistro">Registro:</label>
<input type="text" class="form-control" id="editRegistro" name="editRegistro">
</div>
<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.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>
// Arreglo para almacenar los datos
let datos = [];
//2-Función para cargar los datos en la tabla
function pintarTabla() {
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) {
// Buscar el dato correspondiente al ID
const dato = datos.find(item => item.id === id);
console.log(dato);
// Llenar los campos de la modal con los datos del elemento seleccionado
document.getElementById("editId").value = dato.id;
document.getElementById("editRegistro").value = dato.registro;
document.getElementById("editPDF").value = dato.pdf;
// Mostrar la modal
$("#modalEditar").modal('show');
}
// 1-Cargar los datos al cargar la página
function cargarDatos() {
// Simulamos una petición fetch para obtener los datos del servidor
fetch('http://localhost/obtener_datos.php')
.then(response => response.json())
.then(data => {
datos = data;
pintarTabla();
})
.catch(error => console.error('Error al obtener los datos:', error));
}
// Evento submit del formulario
document.getElementById("formulario").addEventListener("submit", function(event) {
event.preventDefault(); // Prevenir el comportamiento por defecto del formulario
// Obtener los valores del formulario
const registro = document.getElementById("inputRegistro").value;
const pdf = document.getElementById("inputPDF").value;
// Simulamos una petición fetch para enviar los datos al servidor
fetch('http://localhost/agregar_dato.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ registro, pdf })
})
.then(response => response.json())
.then(data => {
console.log('Registro agregado exitosamente:', data);
cargarDatos(); // Recargar datos en la tabla
})
.catch(error => console.error('Error al agregar el registro:', error));
// Limpiar los campos del formulario
document.getElementById("inputRegistro").value = "";
document.getElementById("inputPDF").value = "";
});
// Evento submit del 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 registro = document.getElementById("editRegistro").value;
const pdf = document.getElementById("editPDF").value;
// Simulamos una petición fetch para actualizar los datos en el servidor
fetch('http://localhost/actualizar_dato.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ id, registro, pdf })
})
.then(response => response.json())
.then(data => {
console.log('Registro actualizado exitosamente:', data);
cargarDatos(); // Recargar datos en la tabla
// Ocultar la modal de edición
$("#modalEditar").modal('hide');
})
.catch(error => console.error('Error al actualizar el registro:', error));
});
// Cargar los datos al cargar la página
cargarDatos();
</script>
</body>
</html>
Comentarios
Publicar un comentario