HTML dynamic table row is not getting dynamic id-CodePudding

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

}

CodePudding user response：

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