<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {box-sizing: border-box;font-family:arial;}
.hide {display:none;}
.right {text-align:right;}
.error {border:1px solid Red;}
.nombre {width:100%}
.formulario {text-align:center;width:400px;border:1px solid #eee;padding:10px;}
.formulario label,.formulario label~input {
width: 50%;
display: inline-block;
}
.formulario label {text-align:right;padding-right:20px;}
.formulario>div {margin-top:10px;overflow:hidden;}
.boton {
border:none;
color:white;
padding:10px 20px;
}
.agregar {
background-color:green;
}
.enviar {
background-color:rgb(128, 0, 117);
}
#listado {
border:1px solid #eee;
margin-top:20px;
width:400px;
}
#listado th {background-color:#eee;padding:5px 10px;}
#listado img {
cursor:pointer;
}
</style>
</head>
<body>
<form class="formulario" method="POST">
<div>
<label>Nombre del alumno</label><input type="text" name="nombre">
</div>
<div>
<label>Edad del alumno</label><input type="number" name="edad" min="3" max="100">
</div>
<div>
<br><input type="submit" value="Agregar" class="boton agregar"> <input type="button" value="Enviar" class='boton enviar'>
</div>
</form>
<table id="listado" class='hide'>
<thead>
<th>Alumno</th>
<th>Edad</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<script>
// Evento que se ejecuta al pulsar el botón agregar
document.querySelector("input[type=submit]").addEventListener("click",function(e){
// cancelamos el evento
e.preventDefault();
const nombre=document.querySelector("input[name=nombre]");
const edad=document.querySelector("input[name=edad]");
// mostramos un error si no ha recibido el nombre
if (!nombre.value) {
nombre.classList.add("error");
return;
}
nombre.classList.remove("error");
// mostramos un error si no ha recibido una edad
if (isNaN(parseInt(edad.value)) || parseInt(edad.value)<=0) {
edad.classList.add("error");
return;
}
edad.classList.remove("error");
agregarFila(nombre.value, edad.value);
agregarInput(nombre.value, edad.value);
//limpiamos los valores del input
edad.value="";
nombre.value="";
nombre.focus();
});
// Evento que se ejecuta cuando se pulsa sobre el botón enviar
document.querySelector(".enviar").addEventListener("click", function(e) {
this.closest("form").submit();
})
/**
* Funcion para añadir el nombre y la edad en la tabla
*
* @param string nombre
* @param string edad
*/
function agregarFila(nombre, edad) {
// añadimos el alumno a la tabla crando el tr, td's y el botón para eliminarlo
const tr=document.createElement("tr");
const tdNombre=document.createElement("td");
let txt=document.createTextNode(nombre);
tdNombre.appendChild(txt);
tdNombre.className="nombre";
const tdEdad=document.createElement("td");
txt=document.createTextNode(edad);
tdEdad.appendChild(txt);
tdEdad.className="right";
const tdRemove=document.createElement("td");
const buttonRemove=document.createElement("img");
buttonRemove.src="garbage.png";
buttonRemove.onclick=eliminarFila;
tdRemove.appendChild(buttonRemove);
tr.appendChild(tdNombre);
tr.appendChild(tdEdad);
tr.appendChild(tdRemove);
const tbody=document.getElementById("listado").querySelector("tbody").appendChild(tr);
// eliminamos la clase que tiene oculta la tabla cando no hay ningun alumno
document.getElementById("listado").classList.remove("hide");
}
/**
* Funcion para eliminar el usuario de la tabla y llamar a la funcion
* para eliminar al usuario del input oculto
*/
function eliminarFila(e) {
const tr=this.closest("tr")
const nombre=tr.querySelector(".nombre").innerText;
const edad=tr.querySelector(".right").innerText;
eliminarInput(nombre, edad);
tr.remove();
// Si no hay ningun elemento en la lista, escondemos la tabla
if (document.getElementById("listado").querySelector("tbody").querySelectorAll("tr").length==0) {
document.getElementById("listado").classList.add("hide");
}
}
/**
* Funcion para crear un input oculto para cuando se envie el formulario
* El nombre del input es un array de valores denominado "nombres" que
* contiene el nombre del alumno separado por un guion medio:
* juan-22
* manuel-19
*
* @param string nombre
* @param string edad
*/
function agregarInput(nombre, edad) {
const input=document.createElement("input");
input.type="hidden";
input.name="nombres[]";
input.value=nombre+"-"+edad;
document.querySelector("form").appendChild(input);
}
/**
* Funcion para eliminar el input oculto
*
* @param string nombre
* @param string edad
*/
function eliminarInput(nombre, edad) {
const input=document.querySelector("input[type=hidden][value="+nombre+"-"+edad+"]");
input.remove();
}
</script>
Comentarios sobre la versión: Versión 3 - Crea los inputs ocultos para enviar los usuarios y sus edades (2)