1

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>

1 respuesta 1

1

El control del formulario lo puedes hacer también con html5 usando los atributos: required para que el campo sea obligatorio, pattern=".*\S+.*" para no aceptar valores de espacios en blanco sin letras, title="No es un nombre valido" para el mensaje de error a mostrar en caso de que el nombre contenga solo espacios en blanco. Usando esto ya puedes deshacerte de los primeros dos if, aun así, como no sé si es un requerimiento utilizar JavaScript para eso, incluyo ambas maneras.

Tu código presenta algunos errores, como por ejemplo:

var fila = "<tr><td>" + nombre + "</td><td>" + apellido + "</td>" + "</td></tr>";

Que debería ser:

var fila = "<tr><td>" + nombre + "</td><td>" + apellido + "</td></tr>";

Te recomiendo comparar mi código al tuyo para encontrar los otros.

Formulario que valida sin js:

<form id="formulario" action="" onsubmit='return false'>
    <input type="text" placeholder="Nombre" id="nombre" required pattern=".*\S+.*" title="No es un nombre valido">
    <input type="text" placeholder="Apellido" id="apellido" required pattern=".*\S+.*" title="No es un nombre valido">
    <button type="submit" onclick="Guardar()">Añadir</button>
    <button type="submit" onclick="Eliminar()">Eliminar</button>
</form>

El atributo onsubmit='return false' sirve para que el formulario no envíe los datos evitando así que la página se recargue y cancele el contenido de la tabla, ya que para que funcione esta forma de validación es necesario que los botones sean de tipo submit.

Código completo con un formulario que se valida usando js y cumple con el resto de los puntos especificados:

function Personas() {
    /* Devuelve las personas de la tabla */

    let personas = [];
    for (let i = 0; i < tabla.rows.length; i++) {
        // Elimina espacios en blanco y mayusculas
        personas.push(document.getElementById('tabla').rows[i].innerText.toLowerCase().replace(/\s+/g, ''));
    }
    return personas
};

function LimpiarFormulario() {
    /* Limpia los campos y enfoca el primer campo */

    document.getElementById('formulario').reset();
    document.getElementById('nombre').focus();
};

function Control(guardar=false,eliminar=false) {
    /* Controla los campos input */

    var nombre = document.getElementById('nombre');
    var apellido = document.getElementById('apellido');
    var alertas = document.getElementById('alertas');

    if (nombre.value.trim() == '') {
        alertas.innerHTML = 'No puedes dejar el nombre vacio';
        nombre.focus();
        return 1;
    } else if (apellido.value.trim() == '') {
        alertas.innerHTML = 'No puedes dejar el apellido vacio';
        apellido.focus();
        return 1;
    } else if (guardar && Personas().includes(nombre.value.trim().concat(apellido.value.trim()).toLowerCase())) {
        // La persona ya esta en la tabla               
        alertas.innerHTML = nombre.value + ' ' + apellido.value + 'ya esta en la lista';
        LimpiarFormulario()
        return 1;
    } else if (eliminar && !Personas().includes(nombre.value.trim().concat(apellido.value.trim()).toLowerCase())) {
        // La persona no esta en la tabla             
        alertas.innerHTML = nombre.value + ' ' + apellido.value + 'no se encuentra en la lista';
        LimpiarFormulario()
        return 1;
    } else {
        return 0;
    }
};

function Guardar() {
    /* Añade una persona a la tabla */

    if (Control(guardar=true,eliminar=false)) {
        // Control no superado
    } else {
        let btn = document.createElement("TR");
        btn.innerHTML = "<tr><td>" + nombre.value.trim() + "</td><td>" + apellido.value.trim() + "</td></tr>";
        document.getElementById("tabla").appendChild(btn);
        LimpiarFormulario();
        alertas.innerHTML = '&nbsp;';
    }
}

function Eliminar() {
    /* Elimina una persona de la tabla */

    if (Control(guardar=false,eliminar=true)) {
        // Control no superado
    } else {
        let indice = Personas().indexOf(nombre.value.trim().concat(apellido.value.trim()).toLowerCase());
        document.getElementById('tabla').deleteRow(indice);
        LimpiarFormulario();
        alertas.innerHTML = '&nbsp;';
    }
}
<div class="container">  
    <div id="alertas">&nbsp;</div>
    <br>
    <form id="formulario" action="">
        <input type="text" placeholder="Nombre" id="nombre">
        <input type="text" placeholder="Apellido" id="apellido">
        <button type="button" onclick="Guardar()">Añadir</button>
        <button type="button" onclick="Eliminar()">Eliminar</button>
    </form>
    <br>
    <table border="1">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
            </tr>
        </thead>
        <tbody id="tabla">
        </tbody>
    </table>
</div>

3
  • Muchas gracias por la ayuda @Ariel Montes el ejemplo es bastante claro, me falta seguir desarrollando la lógica, y creo que voy por buen camino ! un saludo Commented el 28 feb. 2021 a las 10:28
  • podrías adaptarlo a la versión con array push y splice ? así tendría dos variantes gracias ! Commented el 28 feb. 2021 a las 10:31
  • esta puesto con push no me habia fijado hasta ahora de todas formas muchas gracias por la ayuda ! Commented el 28 feb. 2021 a las 10:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.