crud-javascript
<!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">
<h2>CRUD JavaScript</h2>
<form id="formulario">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" class="form-control" id="nombre" required>
</div>
<div class="form-group">
<label for="apellido">Apellido:</label>
<input type="text" class="form-control" id="apellido" required>
</div>
<div class="form-group">
<label for="edad">Edad:</label>
<input type="number" class="form-control" id="edad" required>
</div>
<button type="submit" class="btn btn-primary">Agregar</button>
</form>
<hr>
<h3>Registros</h3>
<table class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="tablaBody">
</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" id="indiceEditar">
<div class="form-group">
<label for="editNombre">Nombre:</label>
<input type="text" class="form-control" id="editNombre" required>
</div>
<div class="form-group">
<label for="editApellido">Apellido:</label>
<input type="text" class="form-control" id="editApellido" required>
</div>
<div class="form-group">
<label for="editEdad">Edad:</label>
<input type="number" class="form-control" id="editEdad" required>
</div>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</form>
</div>
</div>
</div>
</div>
<script>
const formulario = document.getElementById('formulario');
const tablaBody = document.getElementById('tablaBody');
const modalEditar = document.getElementById('modalEditar');
const formularioEditar = document.getElementById('formularioEditar');
let registros = [];
formulario.addEventListener('submit', function(event) {
event.preventDefault();
const nombre = document.getElementById('nombre').value;
const apellido = document.getElementById('apellido').value;
const edad = document.getElementById('edad').value;
const nuevoRegistro = {
nombre,
apellido,
edad
};
registros.push(nuevoRegistro);
mostrarRegistros();
formulario.reset();
});
function mostrarRegistros() {
tablaBody.innerHTML = '';
registros.forEach((registro, index) => {
const fila = `
<tr>
<td>${registro.nombre}</td>
<td>${registro.apellido}</td>
<td>${registro.edad}</td>
<td>
<button class="btn btn-primary btn-editar" data-indice="${index}">Editar</button>
</td>
</tr>
`;
tablaBody.innerHTML += fila;
});
actualizarBotonesEditar();
}
function actualizarBotonesEditar() {
const botonesEditar = document.querySelectorAll('.btn-editar');
botonesEditar.forEach(boton => {
boton.addEventListener('click', function() {
const indice = this.dataset.indice;
const registro = registros[indice];
document.getElementById('editNombre').value = registro.nombre;
document.getElementById('editApellido').value = registro.apellido;
document.getElementById('editEdad').value = registro.edad;
document.getElementById('indiceEditar').value = indice;
$(modalEditar).modal('show');
});
});
}
formularioEditar.addEventListener('submit', function(event) {
event.preventDefault();
const indice = document.getElementById('indiceEditar').value;
const nombre = document.getElementById('editNombre').value;
const apellido = document.getElementById('editApellido').value;
const edad = document.getElementById('editEdad').value;
registros[indice].nombre = nombre;
registros[indice].apellido = apellido;
registros[indice].edad = edad;
mostrarRegistros();
$(modalEditar).modal('hide');
});
</script>
<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>
</body>
</html>
Comentarios
Publicar un comentario