HTML 動態表行未獲取動態 ID

Question

我有一個動態 HTML 表，當有新用戶注冊時，它會創建一個新行。 現在我正在嘗試為該行提供一個帶有 for 循環的 id，但它們都得到相同的 id，即：tableID99。 這是我的代碼：

for (var i = 0; i < 100; i++) {
        row.id = "tableID" + i
      }

看起來表格不知道它是動態的還是什么的。 當我 console.log(row.id) 它是一個帶有 tableID1 -> tableID1 -> tableID2 等的升序列表。我在這里缺少什么？

編輯：

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

}

Answer 1

看起來您的代碼中有 3 個循環來創建表：localStorateData.foreach、Object.values(localStorageData).forEach，以及從 0 到 99 的 for 循環。

您正在最外層循環中創建一個新行。 在最里面的 for 循環中，您所做的就是將新行的 id 重置 100 次。

考慮改成這樣：

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