从2D JavaScript数组生成HTML表格

Question

在JavaScript中，是否可以从2D数组生成HTML表格？编写HTML表格的语法往往是非常冗长，所以我要生成从二维数组的JavaScript的HTML表格，如图所示：

[["row 1, cell 1", "row 1, cell 2"], 
["row 2, cell 1", "row 2, cell 2"]] 

将成为：

<table border="1"> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 
</table> 

所以我试图编写一个可从2D JavaScript数组中返回表的javaScript函数，如下所示：

function getTable(array){ 
    //take a 2D JavaScript string array as input, and return an HTML table. 
} 

Answer 1

这是一个函数，它将使用dom而不是字符串连接。

function createTable(tableData) { 
    var table = document.createElement('table'); 
    var tableBody = document.createElement('tbody'); 

    tableData.forEach(function(rowData) { 
    var row = document.createElement('tr'); 

    rowData.forEach(function(cellData) { 
     var cell = document.createElement('td'); 
     cell.appendChild(document.createTextNode(cellData)); 
     row.appendChild(cell); 
    }); 

    tableBody.appendChild(row); 
    }); 

    table.appendChild(tableBody); 
    document.body.appendChild(table); 
} 

createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]); 

Answer 2

这对于double for循环来说很容易。

function makeTableHTML(myArray) { 
    var result = "<table border=1>"; 
    for(var i=0; i<myArray.length; i++) { 
     result += "<tr>"; 
     for(var j=0; j<myArray[i].length; j++){ 
      result += "<td>"+myArray[i][j]+"</td>"; 
     } 
     result += "</tr>"; 
    } 
    result += "</table>"; 

    return result; 
} 

Answer 3

另一个innerHTML-less版本。

function makeTable(array) { 
    var table = document.createElement('table'); 
    for (var i = 0; i < array.length; i++) { 
     var row = document.createElement('tr'); 
     for (var j = 0; j < array[i].length; j++) { 
      var cell = document.createElement('td'); 
      cell.textContent = array[i][j]; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
    return table; 
} 

Answer 4

我知道这是一个老问题，但对于那些细读像我这样的网络，这里是另一种解决方案：

使用replace()的逗号，并创建一组字符，以确定行结束。我只是将--添加到内部数组的末尾。这样你就不必运行for函数。

这里有一个的jsfiddle：https://jsfiddle.net/0rpb22pt/2/

首先，你必须得到一个表在HTML中，并给它一个id：

<table id="thisTable"><tr><td>Click me</td></tr></table> 

这里是你的阵列编辑此方法：

thisArray=[["row 1, cell 1__", "row 2, cell 2--"], ["row 2, cell 1__", "row 2, cell 2"]]; 

注意在每个阵列的末尾添加了--。

因为你也有逗号内部阵列，你必须区分它们以某种方式使你最终不会搞乱你的表 - 细胞后加入__（除了一排的最后一个）的作品。如果你的单元格中没有逗号，这一步并不是必须的。

现在，这里是你的函数：

function tryit(){ 
    document 
    .getElementById("thisTable") 
    .innerHTML="<tr><td>"+String(thisArray) 
    .replace(/--,/g,"</td></tr><tr><td>") 
    .replace(/__,/g,"</td><td>"); 
} 

它的工作原理是这样的：

1. 打电话给你的表格，并获得设定innerHTML。 document.getElementById("thisTable").innerHTML
2. 从添加HTML标签开始行和数据开始。 "<tr><td>"
3. 作为String()添加thisArray。 +String(thisArray)
4. 每隔--更换一次，最后在数据和行关闭和打开的新行之前结束。.replace(/--,/g,"</td></tr><tr><td>")
5. 其他逗号分别表示之间的行。因此，将所有逗号替换为数据的关闭和打开。在这种情况下不是所有的逗号都在行之间，因为单元格有逗号，所以我们不得不区分那些与__：.replace(/__,/g,"</td><td>")。通常你只需要做.replace(/,/g,"</td><td>")。

只要你不介意在你的数组中添加一些杂散字符，它会占用很少的代码，并且易于实现。

Answer 5

如果你不介意的jQuery，我使用this：

<table id="metaConfigTable"> 
    <caption>This is your target table</caption> 
    <tr> 
     <th>Key</th> 
     <th>Value</th> 
    </tr> 
</table> 

<script> 

    function tabelajzing(a){ 
    // takes (key, value) pairs from and array and returns 
    // corresponding html, i.e. [ [1,2], [3,4], [5,6] ] 
     return [ 
     "<tr>\n<th>", 
     a.map(function (e, i) { 
      return e.join("</th>\n<td>") 
     }).join("</td></tr>\n<tr>\n<th>"), 
     "</td>\n</tr>\n" 
     ].join("") 
    } 

    $('#metaConfigTable').find("tr").after(
     tabelajzing([ [1,2],[3,4],[5,6] ]) 
); 
</script> 

Answer 6

丹尼尔·威廉斯回答的ES6版本：

function get_table(data) { 
    let result = ["<table border=1'>"]; 
    for(let row of data) { 
     result.push("<tr>"); 
     for(let cell of row){ 
      result.push(`<td>${cell}</td>`); 
     } 
     result.push("</tr>"); 
    } 
    result.push("</table>"); 
    return result.join('\n'); 
    } 

Answer 7

方便快捷。

function createTable(tableData) { 
    var table = document.createElement('table'); 
    var row = {}; 
    var cell = {}; 

    tableData.forEach(function(rowData) { 
    row = table.insertRow(-1); // [-1] for last position in Safari 
    rowData.forEach(function(cellData) { 
     cell = row.insertCell(); 
     cell.textContent = cellData; 
    }); 
    }); 
    document.body.appendChild(table); 
} 

https://jsfiddle.net/6urdwdtf/1/