使用js显示div中的元素列表[重复]答案

【问题标题】：Display list of elements in div using js [duplicate]使用js显示div中的元素列表[重复]
【发布时间】：2018-05-17 15:41:46
【问题描述】：

在div 的以下html 页面上显示js 文件中的元素的最佳策略是什么？

html 文件：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>SO example</title>
  </head>

  <body>

    <div id="text_table"></div>

  </body>

</html>

css 文件

#text_table {
  top: 10px;
  right: 10px;
  left: 10px;
}

js 文件

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
];

var textTable = document.getElementById("text_table");

for (var i = 0; i < testResults.length; i++) {
  /* leaders.innerHTML += */
};

想要的结果是：

JS fiddle example

【问题讨论】：

简单，但取决于您要如何渲染它。表，列表？
@dfsq 两个选项都可以

标签： javascript html css

【解决方案1】：

您还需要为父数组中的每个数组设置一个内部循环：

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
];

var textTable = document.getElementById("text_table");
var nHTML = '';
for (var i = 0; i < testResults.length; i++) {
   for(var j=0; j<testResults[i].length; j++){
      nHTML+= testResults[i][j]+ ' ';
   }
   nHTML = '<div>' + nHTML + '</div>';
}
textTable.innerHTML = nHTML;

#text_table {
  top: 10px;
  right: 10px;
  left: 10px;
}

&lt;div id="text_table"&gt;&lt;/div&gt;

您也可以使用 .replace(/,/g, ' ') 而不使用内部循环，如下所示：

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
];

var textTable = document.getElementById("text_table");
var nHTML = '';
for (var i = 0; i < testResults.length; i++) {
   nHTML += '<div>' + testResults[i].toString().replace(/,/g, ' ') + '</div>';
}
textTable.innerHTML = nHTML;

#text_table {
  top: 10px;
  right: 10px;
  left: 10px;
}

&lt;div id="text_table"&gt;&lt;/div&gt;

【讨论】：