Строка динамической таблицы HTML не получает динамический идентификатор

#javascript #loops

#язык JavaScript #петли

Вопрос:

У меня есть динамическая таблица HTML, которая создает новую строку при регистрации нового пользователя. Теперь я пытаюсь присвоить строке идентификатор с циклом for, но все они получают один и тот же идентификатор: tableID99. Вот мой код:

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

Похоже, таблица не знает, что она динамична или что-то в этом роде. Когда я консолю.log(row.id) это список по возрастанию с таблицей 1 -gt; таблиЦЕй 1 -gt;gt; таблицей 2 и т.д. Что я здесь упускаю?

Редактировать:

 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 =gt; {  // 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 =gt; {  blokkeerButtons()  // create table row   let row = document.createElement("tr");   // create loop that set data in cells   Object.values(localStorageData).forEach(localStorageData =gt; {   // 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 lt; 100; i  ) {  row.id = "tableID"   i  console.log(row.id)    }  });   // append to DOM   table.appendChild(row);   });  // append to DOM   createTable.appendChild(table);  }

1. row не обновляется. Зачем назначать строки с последовательными идентификаторами? Достаточно легко получить любую строку по индексу коллекции HTML. Почему бы не использовать идентификатор пользователя в качестве идентификатора строки?

2. Похоже, вы работаете с тем же row самым . Вам нужно каждый раз получать ссылку на новую строку.

3. @Kinglish Идентификатор пользователя находится в локальном хранилище, и я не могу его извлечь. Я очень долго пытался, так что я понял это.

4. @SergeiMinaev как мне получить ссылку на новую строку вместо того, чтобы она была той же строкой?

5. Подумайте о том, чтобы показать остальную часть (соответствующего) кода, чтобы получить лучшую помощь

Ответ №1:

Похоже, у вас в коде есть 3 цикла для создания таблицы: localStorateData.foreach, Object.values(localStorageData).Для каждого, и это для цикла, который считается от 0 до 99.

Вы создаете ровно одну новую строку в самом внешнем цикле. В этом самом внутреннем цикле for все, что вы делаете, — это 100 раз сбрасываете идентификатор этой новой строки.

Подумайте о том, чтобы перейти на что-то вроде этого:

 // create loop that makes table var rowCount = 0; localStorageData.forEach(localStorageData =gt; {  blokkeerButtons()  // create table row   let row = document.createElement("tr");   // create loop that set data in cells   Object.values(localStorageData).forEach(localStorageData =gt; {   // 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); });

1. localStorageData.forEach(localStorageData =gt; { за ним следует Object.values(localStorageData).forEach(localStorageData — я думаю, это разрешено, но это сбивает с толку. Кроме того, для идентификатора строки, почему бы просто не использовать тот index , который forEach может быть предоставлен автоматически?