I have a dynamic HTML table that makes a new row when there is a new user being registered. Now i am trying to give the row a id with a for loop but they al get the same id which is: tableID99. Here's my code:
for (var i = 0; i < 100; i++) {
row.id = "tableID" + i
}
It looks like the table does not know it is dynamic or something. When i console.log(row.id) it is an ascending list with tableID1 -> tableID1 -> tableID2 etc. What am i missing here?
Edit:
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);
}
It looks like you have 3 loops in your code to create the table: localStorateData.foreach, Object.values(localStorageData).forEach, and that for loop that counts from 0 to 99.
You are making exactly one new row in the outermost loop. In that innermost for loop, all you're doing is resetting the id of that one new row 100 times.
Consider changing to something like this:
// 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);
});