使用for循环制作表格

Question

我有这个代码。 很好，没有错误。 但我不喜欢重复代码html += "td"; 很多。 Eaven html += "/td"; 。 它的含义不明确。 如何使用for循环以较短的代码进行编码？

html = "<table>";
html += "<tr>";
for(var name in newArticle[1]){
  html += "<th>";
  html += name;
  html += "</th>";
}
html += "</tr>";
for (var i=0; i<newArticle.length; i++) {
    html += "<tr>";
    html += "<td>";
    html += newArticle[i]["id"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["Forename"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["Surname"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["Age"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["City"];
    html += "</td>";
    html += "<td>";
    html += newArticle[i]["ZIP"];
    html += "</td>";
    html += "</tr>";
}
html += "</table>";
  console.log(html);

  for(var name in newArticle[1]){
    console.log(name);
  }

您可以注意到newArticle()是一个数组，而表数据来自该数组的元素。

Answer 1

newArticle = 
html = "<table>";
html += "<tr>";
for(var name in newArticle[1]){
  html += "<th>";
  html += name;
  html += "</th>";
}
html += "</tr>";
for (var i=0; i<newArticle.length; i++) {
  html += "<tr>";
  for(var key in newArticle[i])
  {
    html += "<td>";
    html += newArticle[i][key];
    html += "</td>";
  }
  html += "</tr>";
}
html += "</table>";
console.log(html);    
for(var name in newArticle[1]){
  console.log(name);
}

Answer 2

定义一个新的数组（例如，按newArticle数组的列要求按顺序排列带有元素的myarr。现在可以在for循环中使用newArticle数组，如下所示：

newArticle[i][myarr[j]] ;

您可以从0开始j并保持递增以获取下一个相应的值。 希望能帮助到你 。