Tengo una tabla HTML dinámica que crea una nueva fila cuando se registra un nuevo usuario. Ahora estoy tratando de darle a la fila una identificación con un bucle for, pero todos obtienen la misma identificación, que es: tableID99. Aquí está mi código:
for (var i = 0; i < 100; i++) { row.id = "tableID" + i }Parece que la mesa no sabe que es dinámica o algo así. Cuando consola.log (fila.id) es una lista ascendente con tableID1 -> tableID1 -> tableID2, etc. ¿Qué me estoy perdiendo aquí?
Editar:
function showTable() { // dummy data to start with let localStorageData = JSON.parse(localStorage.getItem("users")) // get button and table with query selector let createTable = document.querySelector("#table") // table heading let headers = ["ID", "Gebruikersnaam", "Email", "Wachtwoord", "Gebruikersrol", "Voornaam", "Achternaam", "Geboortedatum", "Adres", "Huisnummer", "Postcode", "Plaatsnaam", "Land", "Suspended"] // create table elements let table = document.createElement("table"); let headerRow = document.createElement("tr"); // start loop headers.forEach(headerText => { // create table heading and textnode let header = document.createElement("th"); let textNode = document.createTextNode(headerText); // append to DOM header.appendChild(textNode); headerRow.appendChild(header); table.appendChild(headerRow) }); // create loop that makes table localStorageData.forEach(localStorageData => { blokkeerButtons() // create table row let row = document.createElement("tr"); // create loop that set data in cells Object.values(localStorageData).forEach(localStorageData => { // create element and textnode let cell = document.createElement("td"); let textNode = document.createTextNode(localStorageData as string); // append to DOM cell.appendChild(textNode); row.appendChild(cell); for (var i = 0; i < 100; i++) { row.id = "tableID" + i console.log(row.id) } }); // append to DOM table.appendChild(row); }); // append to DOM createTable.appendChild(table); }Parece que tiene 3 bucles en su código para crear la tabla: localStorateData.foreach, Object.values(localStorageData).forEach, y el bucle for que cuenta de 0 a 99.
Estás haciendo exactamente una nueva fila en el bucle más externo. En ese bucle for más interno, todo lo que está haciendo es restablecer la identificación de esa nueva fila 100 veces.
Considere cambiar a algo como esto:
// create loop that makes table var rowCount = 0; localStorageData.forEach(localStorageData => { blokkeerButtons() // create table row let row = document.createElement("tr"); // create loop that set data in cells Object.values(localStorageData).forEach(localStorageData => { // create element and textnode let cell = document.createElement("td"); let textNode = document.createTextNode(localStorageData as string); // append to DOM cell.appendChild(textNode); row.appendChild(cell); }); // append to DOM row.id = "tableID" + rowCount; rowCount++; table.appendChild(row); });