☰

2D JavaScript 配列から HTML テーブルを生成する 質問する

tag-icon • tag-icon javascript html-table
2D JavaScript 配列から HTML テーブルを生成する 質問する

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.
}

ベストアンサー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"]]);

おすすめ記事