Skip to main content
1 de 5
Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14

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");
      }
    });
  });
});

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

Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14