1

Trataba de crear una tabla por medio de js en donde aparecería (id, nombre, apellido, email, edad, dni, telefono) pero cuando ingreso los input y llamo los datos obtenidos solo me repite la misma cosa que dejé como encabezado.

Este es mi index (algunos id y class no llevan a nada ya que luego le aplicaré css)

    <!DOCTYPE html>
    <html lang="en">
      <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>Document</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      </head>
      <body>
        <div class="centrarFormulario">
          <form id="formulario">
            <label for="nombre">Nombre:</label>
            <input id="nombre" type="text" placeholder="Ingrese su nombre" />
            <label for="apellido">Apellido:</label>
            <input id="apellido" type="text" placeholder="Ingrese su apellido" />
            <label for="email">email:</label>
            <input id="email" type="email" placeholder="Ingrese su email" />
            <label for="edad">Edad:</label>
            <input id="edad" type="number" placeholder="Ingrese su Edad" />
            <label for="id">Id:</label>
            <input
              id="id"
              type="number"
              placeholder="Ingrese su n° de cliente en orden"
            />
            <label for="dni">dni:</label>
            <input id="dni" type="number" placeholder="Ingrese su DNI" />
            <label for="telefono">Telefono:</label>
            <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
            <label for="calle">Dirección:</label>
            <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
            <h3>Ingrese los datos del pedido</h3>
            <label for="asistencia">Cantidad de ingresantes:</label>
            <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
            <label for="aplicantes">cantidad de ancianos y menores:</label>
            <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
            <button id="btnLoad" type="submit">Enviar</button>
            <button type="reset">Restablecer</button>
          </form>
        </div>
        <script src="./js/main.js"></script>
      </body>
    </html>

y este mi js

    $(document).ready(function () {
      $("#btnLoad").click(function () {
        console.log($("#nombre").val());
        console.log($("#apellido").val());
        console.log($("#email").val());
        console.log($("#edad").val());
        console.log($("#id").val());
        console.log($("#dni").val());
        console.log($("#telefono").val());
        console.log($("#ingresantes").val());
        console.log($("#aplicantes").val());
    
        const form = $("#formulario");
        const inputName = $("#nombre");
        const inputSurname = $("#apellido");
        const inputEmail = $("#email");
        const inputAge = $("#edad");
        const inputId = $("#id");
        const inputDni = $("#dni");
        const inputPhone = $("#telefono");
        // pronto usare esto para dar resultados sobre la compra de boletos
        // const inputIncoming = $("#ingresantes");
        // const inputApplicants = $("#aplicantes");
        //---------------------------------------------------------------
        function User(id, nombre, apellido, email, edad, dni, telefono) {
          this.id = id;
          this.nombre = nombre;
          this.apellido = apellido;
          this.email = email;
          this.edad = edad;
          this.id = id;
          this.dni = dni;
          this.telefono = telefono;
        }
    
        let listUser = [];
    
        listUser = getUserFromStorage("users") || [];
    
        function saveToStorage(key, user) {
          listUser.push(user);
          localStorage.setItem(key, JSON.stringify(listUser));
        }
    
        function getUserFromStorage(key) {
          if (localStorage.getItem(key)) {
            return JSON.parse(localStorage.getItem(key));
          }
        }
    
        function createTable(element, id) {
          const table = `<table id=${id} class="tabla"></table>`;
          $(element).append(table);
        }
        function createDataHeader(data) {
          return data.map((headerData) => `<th> ${headerData} </th>`);
        }
    
        function createTableHeader(data, table) {
          const header = `<tr> ${createDataHeader(data)} </tr>`;
          $(table).append(header);
        }
    
        function populateTableData(
          id,
          nombre,
          apellido,
          email,
          edad,
          dni,
          telefono
        ) {
          return `<td class="celdas"> ${id} </td> 
          <td class="celdas"> ${nombre} </td> 
          <td class="celdas"> ${apellido} </td> 
          <td class="celdas"> ${email} </td> 
          <td class="celdas"> ${edad} </td> 
          <td class="celdas"> ${dni} </td> 
          <td class="celdas"> ${telefono} </td>`;
        }
    
        function createRowUser(user, element) {
          const row = `<tr id="tr-${user.id}"> ${populateTableData(
            user.id,
            user.nombre,
            user.apellido,
            user.email,
            user.edad,
            user.dni,
            user.telefono
          )} </tr>`;
        }
    
        function populateRows(data, element) {
          data.map((user) => {
            createRowUser(user, element);
          });
        }
    
        if (localStorage.getItem("users")) {
          createTable("body", "user-table");
          createTableHeader(
            ["id", "nombre", "apellido", "email", "edad", "dni", "telefono"],
            "#user-table"
          );
          populateRows(getUserFromStorage("users"), "#user-table");
        }
    
        form.submit(function (event) {
          event.preventDefault();
    
          const id = inputId.val();
          const nombre = inputName.val();
          const apellido = inputSurname.val();
          const email = inputEmail.val();
          const edad = inputAge.val();
          const dni = inputDni.val();
          const telefono = inputPhone.val();
    
          const user = new User(nombre, apellido, email, edad, id, dni, telefono);
    
          if (!localStorage.getItem("users")) {
            createTable("body", "user-table");
            createTableHeader([
              "id",
              "nombre",
              "apellido",
              "email",
              "edad",
              "dni",
              "telefono",
            ]);
    
            saveToStorage("users", user);
    
            createRowUser(user, "#user-table");
          }
        });
      });
    });
3
  • 1
    Cual es tu idea, que debe pasar con los datos, armar una tabla debajo del formulario con cada registro ingresado? Commented el 29 dic. 2021 a las 15:33
  • 1
    Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Evita la palabra urgente en tu publicacion. eso solo espanta a la gente que te puede ayudar...
    – gbianchi
    Commented el 29 dic. 2021 a las 15:34
  • 1
    Ayuda es realmente urgente. -> Las urgencias las cobro a mayores, como el veterinario. Aquí respondemos en nuestro tiempo libre CUANDO PODEMOS, el que está cobrando por hacerlo eres tu no nosotros, así que no metas prisa por favor. Todo el mundo tiene problemas y todos son urgentes para quien los tiene.
    – Benito-B
    Commented el 29 dic. 2021 a las 15:54

1 respuesta 1

0

Creo que esto puede ayudarte:

Primero declare una variable que usaremos como flag, antes de hacer el listener del boton.. o sea:

$(document).ready(function () {
  let tableIsCreated = false; // Aquí creamos la variable para que no se resetee al presionar el botón
  $("#btnLoad").click(function () {
........
}}

Luego en la siguiente función, no estabas haciendo el append de lo generado en el contendor (tabla), quedaría así:

function createRowUser(user, element) {
  const row = `<tr id="tr-${user.id}"> ${populateTableData(
    user.id,
    user.nombre,
    user.apellido,
    user.email,
    user.edad,
    user.dni,
    user.telefono
  )} </tr>`;
  $(element).append(row);
}

Finalmente aquí hacemos uso del flag para que no se cree cada vez que presionamos el botón una nueva tabla con su headers, se deja una sola y se cargan nuevos tr nada más.

if (localStorage.getItem("users")) {
  if (!tableIsCreated) {
    createTable("body", "user-table");
    createTableHeader(
      ["id", "nombre", "apellido", "email", "edad", "dni", "telefono"],
      "#user-table"
    );
    tableIsCreated = true;
  }
  populateRows(getUserFromStorage("users"), "#user-table");
}

Como resultado final, cada vez que se ingresa un registro, se crea una fila en la tabla con los datos, con una única tabla y headers en HTML.


Dejo por las dudas el código completo.

$(document).ready(function () {
  let tableIsCreated = false;
  $("#btnLoad").click(function () {
    console.log($("#nombre").val());
    console.log($("#apellido").val());
    console.log($("#email").val());
    console.log($("#edad").val());
    console.log($("#id").val());
    console.log($("#dni").val());
    console.log($("#telefono").val());
    console.log($("#ingresantes").val());
    console.log($("#aplicantes").val());

    const form = $("#formulario");
    const inputName = $("#nombre");
    const inputSurname = $("#apellido");
    const inputEmail = $("#email");
    const inputAge = $("#edad");
    const inputId = $("#id");
    const inputDni = $("#dni");
    const inputPhone = $("#telefono");
    // pronto usare esto para dar resultados sobre la compra de boletos
    // const inputIncoming = $("#ingresantes");
    // const inputApplicants = $("#aplicantes");
    //---------------------------------------------------------------
    function User(id, nombre, apellido, email, edad, dni, telefono) {
      this.id = id;
      this.nombre = nombre;
      this.apellido = apellido;
      this.email = email;
      this.edad = edad;
      this.id = id;
      this.dni = dni;
      this.telefono = telefono;
    }

    let listUser = [];

    listUser = getUserFromStorage("users") || [];

    function saveToStorage(key, user) {
      listUser.push(user);
      localStorage.setItem(key, JSON.stringify(listUser));
    }

    function getUserFromStorage(key) {
      if (localStorage.getItem(key)) {
        return JSON.parse(localStorage.getItem(key));
      }
    }

    function createTable(element, id) {
      const table = `<table id=${id} class="tabla"></table>`;
      $(element).append(table);
    }
    function createDataHeader(data) {
      return data.map((headerData) => `<th> ${headerData} </th>`);
    }

    function createTableHeader(data, table) {
      const header = `<tr> ${createDataHeader(data)} </tr>`;
      $(table).append(header);
    }

    function populateTableData(
      id,
      nombre,
      apellido,
      email,
      edad,
      dni,
      telefono
    ) {
      return `<td class="celdas"> ${id} </td> 
        <td class="celdas"> ${nombre} </td> 
        <td class="celdas"> ${apellido} </td> 
        <td class="celdas"> ${email} </td> 
        <td class="celdas"> ${edad} </td> 
        <td class="celdas"> ${dni} </td> 
        <td class="celdas"> ${telefono} </td>`;
    }

    function createRowUser(user, element) {
      const row = `<tr id="tr-${user.id}"> ${populateTableData(
        user.id,
        user.nombre,
        user.apellido,
        user.email,
        user.edad,
        user.dni,
        user.telefono
      )} </tr>`;
      $(element).append(row);
    }

    function populateRows(data, element) {
      data.map((user) => {
        createRowUser(user, element);
      });
    }

    if (localStorage.getItem("users")) {
      if (!tableIsCreated) {
        createTable("body", "user-table");
        createTableHeader(
          ["id", "nombre", "apellido", "email", "edad", "dni", "telefono"],
          "#user-table"
        );
        tableIsCreated = true;
      }
      populateRows(getUserFromStorage("users"), "#user-table");
    }

    form.submit(function (event) {
      event.preventDefault();

      const id = inputId.val();
      const nombre = inputName.val();
      const apellido = inputSurname.val();
      const email = inputEmail.val();
      const edad = inputAge.val();
      const dni = inputDni.val();
      const telefono = inputPhone.val();

      const user = new User(nombre, apellido, email, edad, id, dni, telefono);

      if (!localStorage.getItem("users")) {
        createTable("body", "user-table");
        createTableHeader([
          "id",
          "nombre",
          "apellido",
          "email",
          "edad",
          "dni",
          "telefono",
        ]);

        saveToStorage("users", user);

        createRowUser(user, "#user-table");
      }
    });
  });
});

Versión 2 completa:

HTML

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
      <link rel="stylesheet" href="css/main.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="centrarFormulario">
      <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" placeholder="Ingrese su nombre" />
        <label for="apellido">Apellido:</label>
        <input id="apellido" type="text" placeholder="Ingrese su apellido" />
        <label for="email">email:</label>
        <input id="email" type="email" placeholder="Ingrese su email" />
        <label for="edad">Edad:</label>
        <input id="edad" type="number" placeholder="Ingrese su Edad" />
        <label for="id">Id:</label>
        <input
          id="id"
          type="number"
          placeholder="Ingrese su n° de cliente en orden"
        />
        <label for="dni">dni:</label>
        <input id="dni" type="number" placeholder="Ingrese su DNI" />
        <label for="telefono">Telefono:</label>
        <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
        <label for="calle">Dirección:</label>
        <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
        <h3>Ingrese los datos del pedido</h3>
        <label for="asistencia">Cantidad de ingresantes:</label>
        <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
        <label for="aplicantes">cantidad de ancianos y menores:</label>
        <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
        <button id="btnLoad" type="submit">Enviar</button>
        <button type="reset">Restablecer</button>
        <button type="button" id="btnDeleteStorage">Borrar Storage</button>
      </form>
    </div>
    <table>
      <thead id="tableHead">
        <tr>
          <th>Id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Edad</th>
          <th>DNI</th>
          <th>Teléfono</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
    <script src="js/main.js"></script>
  </body>
</html>

JavaScript (En un archivo app.js en misma carpeta que HTML)

    $(document).ready(function () {
  const tableBody = $("#tableBody");
  const tableHead = $("#tableHead");
  if (getUserFromStorage("users")) {
    drawTable();
  } else {
    tableHead.hide();
  }

  console.log($("#nombre").val());
  console.log($("#apellido").val());
  console.log($("#email").val());
  console.log($("#edad").val());
  console.log($("#id").val());
  console.log($("#dni").val());
  console.log($("#telefono").val());
  console.log($("#ingresantes").val());
  console.log($("#aplicantes").val());

  const form = $("#formulario");
  const inputName = $("#nombre");
  const inputSurname = $("#apellido");
  const inputEmail = $("#email");
  const inputAge = $("#edad");
  const inputId = $("#id");
  const inputDni = $("#dni");
  const inputPhone = $("#telefono");
  const allInputs = document.querySelectorAll("input");
  const btnDeleteStorage = $("#btnDeleteStorage"); //Capturo boton reset Storage
  // pronto usare esto para dar resultados sobre la compra de boletos
  // const inputIncoming = $("#ingresantes");
  // const inputApplicants = $("#aplicantes");
  //---------------------------------------------------------------
  function User(id, nombre, apellido, email, edad, dni, telefono) {
    this.id = id;
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
    this.edad = edad;
    this.id = id;
    this.dni = dni;
    this.telefono = telefono;
  }

  let listUser = [];

  if (getUserFromStorage("users")) {
    listUser = getUserFromStorage("users");
  }

  function saveToStorage(key, user) {
    listUser.push(user);
    localStorage.setItem(key, JSON.stringify(listUser));
  }

  function getUserFromStorage(key) {
    if (localStorage.getItem(key)) {
      return JSON.parse(localStorage.getItem(key));
    }
  }

  function drawTable() {
    for (const user of getUserFromStorage("users")) {
      tableHead.show();
      tableBody.append(`<tr>
      <td>${user.id}</td>
      <td>${user.nombre}</td>
      <td>${user.apellido}</td>
      <td>${user.email}</td>
      <td>${user.edad}</td>
      <td>${user.dni}</td>
      <td>${user.telefono}</td>
      </tr>`);
    }
  }

  form.submit(function (event) {
    event.preventDefault();

    const id = inputId.val();
    const nombre = inputName.val();
    const apellido = inputSurname.val();
    const email = inputEmail.val();
    const edad = inputAge.val();
    const dni = inputDni.val();
    const telefono = inputPhone.val();

    const user = new User(id, nombre, apellido, email, edad, dni, telefono);

    saveToStorage("users", user); //Guardo user en storage
    tableBody.empty(); //Borro el tbody de la tabla
    drawTable(); //Dibujo tabla actualizada

    //Pongo todos los input en blanco tras agregar a la tabla y storage.
    for (const input of allInputs) {
      input.value = "";
    }
  });
  //Al presionar botón se borra Storage y se recarga la página para borrar tabla
  btnDeleteStorage.click(() => {
    localStorage.clear();
    location.reload();
  });
});

Agregué también que se muestre u oculte el header de la tabla si hay o no datos en la Storage, también que todos los inputs se pongan en blanco tras agregar a la tabla y localStorage.

Espero sirva para resolver tu problema, estoy a las ordenes, buena jornada!

15
  • Hola muchas gracias por ayudar, intente lo que me dijiste y si bien ya no aparece la cabezera todo el tiempo ahora luego del primer submit solo se repite los datos del primer submit y el resto no aparece. Aunque con lo que me corregiste ya di un gran paso. pd: tambien el id me aparece como undefined.
    – Drenak
    Commented el 29 dic. 2021 a las 18:42
  • En la noche que vuelvo lo veo y te paso feedback Commented el 29 dic. 2021 a las 22:06
  • Muchas gracias!!!
    – Drenak
    Commented el 30 dic. 2021 a las 3:28
  • Creo que hay mucho código para eliminar, por favor explicame un poco mejor que deseas hacer y te armo algo para que puedas comparar y aprovechar. Commented el 30 dic. 2021 a las 3:43
  • Es verdad que algunas cosas se pueden sacar, lo que busco es que aparesca un cuadro con los datos del usuario que van enviando y que se coloquen uno debajo del otro nada mas.
    – Drenak
    Commented el 30 dic. 2021 a las 4:46

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.