【Javascript】動的に生成したtable要素が表示されない（IEで）
Category JavaScript
2009/12/16
問題
IEで、動的に生成したtable要素が表示されないという現象が発生しました。
対応方法
tbody要素を入れましょう
次のサンプルのように、tbodyを入れて、tableにappendChildしないとIEではtableが表示されない。Firefoxだとtbodyがなくても表示する。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テーブル表示テスト</title>
<script type="text/javascript">
window.onload = function() {
//tableを作る
var th = document.createElement('th')
th.appendChild(document.createTextNode("見出し"))
var td = document.createElement('td')
td.appendChild(document.createTextNode("本文本文本文"))
var tr = document.createElement('tr')
tr.appendChild(th)
tr.appendChild(td)
//tbodyが必要
var tbody = document.createElement('tbody')
tbody.appendChild(tr)
var table = document.createElement('table')
table.appendChild(tbody)
//bodyに追加
document.getElementsByTagName('body')[0].appendChild(table)
}
</script>
</head>
<body></body>
</html>
jQueryとかは使うとそのへんはちゃんとフォローされてますね。
ちなみにinsertRowを使うとtbodyがなくても入れれたりします。（勝手に補完する）
http://jsajax.com/TableInsertRowArticle157.aspx
静的なHTMLでtbodyを省略した場合はDOM構築時にtbodyを補完してるんだったかなー(余計なことに）。そのへんはちとうろ覚えです。
HTMLにtbody書かなくても勝手に入りますね。それでまたtd要素など探すときに思った場所になかったり。