从javascript数组格式填充HTML表

Question

假设我有一个以下格式的java脚本数组，

[
"Heading 1",
"Heading 2",
"Data 1",
"Data 2",
"Data 3",
"Data 4",
 ]

我需要使用以下格式

从数组中创建HTML表

我从未动态地从Javascript创建HTML表格。 谁能帮我吗？
提前致谢！

Answer 1

在这里，您可以找到一些代码来满足您的需求：

//set the number of columns (we use 2 because you have 2 "Heading")
var _numberCol = 2,
    _arr = [
      "Heading 1",
      "Heading 2",
      "Data 1",
      "Data 2",
      "Data 3",
      "Data 4"
	 ];

//create a table
var $table = document.createElement("table"), $row;

for(var _k = 0; _k < _arr.length; _k++){
   //we create a row when index is divisible for _numberCol
   if(_k % _numberCol===0) $row = $table.insertRow(-1);
   //for each element inside the array we crate a cell inside the current row
   $col = $row.insertCell(-1);
   //then we put the value inside like text
   $col.innerText = _arr[_k];
}

//now we can append our table where we need to place it
document.body.appendChild($table);

此代码仅适用于只有一个维度的数组类型，并且所有标题都与表格中的其他单元格一样定义。

Answer 2

如果你在JS中需要它，你可以使用该数组为表创建一个html字符串。如果您需要将它放在html页面的元素中，您可以执行以下操作：

document.getElementById("myDiv").innerHTML = myHtmlTable;

我写了一个函数示例，用于在this JSfiddle生成这样的字符串。

（如果您无法访问小提琴，请告诉我，我之前从未使用过StackOverflow的答案）。

Answer 3

＆＃13;

＆＃13;

var data = [
"Heading 1",
"Heading 2",
"Data 1",
"Data 2",
"Data 3",
"Data 4",
 ]
 
var tabdiv = document.createElement('div');
tabdiv.setAttribute("id", "tab");
document.body.appendChild(tabdiv)
	document.getElementById("tab").innerHTML = "<table border = '1' style='border-collapse: collapse;'>" +'<tr>' + '<th>'+ data[0] + "</th>" + '<th>'+ data[1] + "</th>" + '</tr>' + '<tr>' + '<td>' + data[2] + '</td>' + '<td>' + data[3] + '</td>' + '</tr>' + '<td>' + data[4] + '</td>' + '<td>' + data[5] + '</td>' + '</tr>';

＆＃13;

＆＃13;

＆＃13;