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!