從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/