JavaScriptのDOMでのtableタグ構築最適解

JavaScriptのDOMでのtableタグ構築最適解

JavaScriptでtableタグ構築

JavaScriptでJSONなどのデータからtableタグで表を作成する方法は山ほどあるがES6を使用しないのであればこの記述が最適解だと思う。

CSS

table {
  border-collapse: collapse;
}
table th {
  padding: 5px;
  border: 1px solid #ccc;
  background: #eee;
  color: #333;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}
table td {
  padding: 6px;
  border: 1px solid #ccc;
  background: #fff;
}

JavaScript

var data = [
  [ 1, 2, 3 ],
  [ 4, 5, 6 ],
  [ 7, 8, 9 ]
];
var table = document.createElement('table');
data.forEach(function(row, i) {
  var tr = document.createElement('tr');
  row.forEach(function(cell, j) {
    var th = document.createElement('th');
    var td = document.createElement('td');
    if (i === 0 || j === 0) {
      th.textContent = cell + ' row' + i + ' colomn' + j;
      tr.appendChild(th);
    } else {
      td.textContent = cell + ' row' + i + ' colomn' + j;
      tr.appendChild(td);
    }
  });
  table.appendChild(tr);
});
document.getElementById('r').appendChild(table);

JavaScriptでtableタグ構築サンプル