概要
閲覧数:576
投稿日:2014-11-03
更新日:2014-11-14
テーブルタグと内容を作成して追加
・insertRow使用
コード
<div id="result"></div>
<script>
(function () {
var doc = document,
table = doc.createElement('table'),
thead = table.createTHead(),
tr = thead.insertRow(),
th = doc.createElement('th'),
thary = ['見出1', '見出2', '見出3'];
th.appendChild(doc.createTextNode('str')); //生成したテキストノードを、thタグノードの子ノードリストの末尾へ追加
for (var i = 0; i < thary.length; ++i) {
th = th.cloneNode(true); //thタグノードを複製。<th>str</th>
th.firstChild.data = thary[i]; //<th>見出1</th>
tr.appendChild(th); //<tr><th>見出1</th></tr>
}
thead.appendChild(tr);
doc.getElementById('result').appendChild(table);
})();
</script>結果
<div id="result">
<table>
<thead>
<tr>
<th>見出1</th><th>見出2</th><th>見出3</th>
</tr>
</thead>
</table>
</div>