Hola chicos estoy realizando una aplicación en la que se requieren estos puntos, pero solo tengo hecho lo básico, y no se si es correcto, lo suyo sería utilizar array push para añadir datos y splice para eliminarlos mientras se escribe en el input, pero, ¿Cómo aplicarlo de manera correcta?
P.D.: el formulario lo tengo hecho en DOM, pero como son demasiados caracteres y no me deja pegarlo, lo he hecho en html.
Gracias de antemano...
Aquí los puntos necesarios para que sea correcto :
a) Se escribe un mensaje de error la página (no un alert), si pulsan añadir y eliminar y no se han rellenado ambos campos.
b) Si pulsan añadir se crea una nueva línea en el listado en forma de tabla.
c) Si pulsan añadir y la persona ya está en la tabla, escribimos un mensaje de error.
d) Si pulsan eliminar, eliminamos la persona de la tabla, o avisamos en caso de que no exista.
e) Si pulsan eliminar y la persona no existe en la tabla, escribimos un mensaje de error.
function guardar() {
var nombre = document.getElementById('nombre').value;
var apellido = document.getElementById('apellido').value;
var resultado = document.getElementById('resultado');
if (nombre.trim() == '') {
resultado.innerHTML = 'No puedes dejar el nombre vacio';
nombre.focus();
//alert("ingrese el nombre");
}
if (apellido.trim() == '') {
resultado.innerHTML = 'No puedes dejar el apellido vacio';
apellido.focus();
} else {
var fila = "<tr><td>" + nombre + "</td><td>" + apellido + "</td>" + "</td></tr>";
var btn = document.createElement("TR");
btn.innerHTML = fila;
document.getElementById("tablita").appendChild(btn);
}
}
<html lang="es"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio-2</title>
<link rel="stylesheet" href="style.css">
<script src="ejercicio2.js"></script>
</head>
<body>
<div class="contenedor-principal" id="contenedor">
<form id="formulario" action=" ">
<input type="text" name="nombre" placeholder="Nombre" id="nombre">
<input type="text" name="apellido" placeholder="apellido" id="apellido">
<button type="button" name="añadir" onclick="guardar()" id="Añadir">Añadir</button>
<button type="button" name="eliminar" id="eliminar">Elminar</button>
</form>
<br>
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
</thead>
<tbody id="tablita">
</tbody>
</table>
</div>
</body>
</html>