使用 JSON 属性添加 ID答案

【问题标题】：Add ID using JSON property使用 JSON 属性添加 ID
【发布时间】：2021-05-24 19:31:59
【问题描述】：

我希望为循环中的每一行添加一个 ID，该 ID 将等于 data[i].name 值。我有一个 json 结构中的数据，它按预期读取。我正在努力寻找添加 ID 的正确位置以及如何确保 ID 等于 data[i] 名称。

buildTable(myArray)

 function buildTable(data){
  var table = document.getElementById("myTable")

  for (var i = 0; i < data.length; i++){
   var row = `<tr>  
                <td>${data[i].name}</td>
                <td>${data[i].theme}</td>
                <td>${data[i].level1}</td>
                <td>${data[i].level2}</td>
                <td>${data[i].level3}</td>
                <td> 
                  <select name="levels" id="levels">
                  <option value="level1">Level 1</option>
                  <option value="level2">Level 2</option>
                  <option value="level3">Level 3</option>
                  </select> 
                </td>
              </tr> `
  table.innerHTML += row
             }
  $("tr").addClass("class1")
 }

【问题讨论】：

JSON 是一种用于数据交换的文本符号。 (More here.) 如果您正在处理 JavaScript 源代码，而不是处理 string，那么您就不是在处理 JSON。
你的意思是<tr id="${data[i].name}">？
您想将data[i] 的哪个属性用于id？您似乎已经知道如何在您正在创建的 HTML 中包含来自 data[i] 的信息（这就是您对 ${data[i].name} 所做的事情。您与 id 的关系在哪里？
<tr id="${data[i].name}"> 应该已经做到了，不是吗？（您的所有姓名是否实际上都构成了 id 属性的 valid 值，这将是一个不同的问题。）
旁注：不要在循环中使用+= 和innerHTML。当你这样做时，每次循环迭代，浏览器必须遍历元素中的所有节点，构建它们的 HTML 表示，将该字符串交给 JavaScript 引擎，从 JavaScript 引擎获取更新的字符串，解析它，拆除旧元素并将它们扔掉，构建新元素，并用这些新元素填充目标元素。相反，使用insertAdjacentHTML 和类似的（或创建元素和appendChild 它们）。

标签： javascript jquery json loops html-table

【解决方案1】：

你可以使用类似的东西：

buildTable(myArray)

 function buildTable(data){
  var table = document.getElementById("myTable")
  var tableContent = "";

  for (var i = 0; i < data.length; i++){
   var row = `<tr id="${data[i].name}">  
                <td>${data[i].name}</td>
                <td>${data[i].theme}</td>
                <td>${data[i].level1}</td>
                <td>${data[i].level2}</td>
                <td>${data[i].level3}</td>
                <td> 
                  <select name="levels" id="levels">
                  <option value="level1">Level 1</option>
                  <option value="level2">Level 2</option>
                  <option value="level3">Level 3</option>
                  </select> 
                </td>
              </tr> `
  tableContent += row;
             }
  table.innerHTML = tableContent;
}

【讨论】：