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);