JavaScriptでtableタグ構築サンプル
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);