2D JavaScript配列からのHTMLテーブルの生成

Question

JavaScriptでは、2D配列からHTMLテーブルを生成できますか？示すように、HTMLテーブルを記述するための構文は非常に冗長になりがちなので、私は、2D 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

もう1つのinnerHTMLレスバージョン。

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です：

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

：あなたの配列は、この方法のために編集されています。ここ

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

：https://jsfiddle.net/0rpb22pt/2/

まず、あなたのHTML内のテーブルを取得し、それをIDを与える必要があり

各アレイの末尾に追加された--に注目してください。

あなたはまた、配列の内部コンマを持っているので、あなたが働く（行の最後の1以外の）細胞の後__を追加あなたの卓上をめちゃくちゃに終わるしないように何とかそれらを区別する必要があります。セルにカンマがない場合は、この手順は必要ありません。

は、今ここであなたの関数です：

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. thisArrayをString()として追加します。 +String(thisArray)
4. 新しい行の前に終わるすべての--を、データと行を閉じて開いて置き換えます。.replace(/--,/g,"</td></tr><tr><td>")
5. 他のカンマは、別々のデータを表します。行以内です。したがって、すべてのカンマをデータの終了と開きに置き換えます。この場合はではありません。セルにはコンマが付いているため、カンマは行間にあるため、__：.replace(/__,/g,"</td><td>")と区別する必要がありました。通常は.replace(/,/g,"</td><td>")とします。

迷子文字を配列に追加しても問題がなければ、実装するコードが大幅に少なくて済みます。あなたはjQueryのを気にしない場合は

Answer 5

、私は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/