SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【Javascript】動的に生成したtable要素が表示されない(IEで)

問題

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>

関連するメモ

コメント(2)

ぎふますたー 2009年12月17日 15:24

jQueryとかは使うとそのへんはちゃんとフォローされてますね。

ちなみにinsertRowを使うとtbodyがなくても入れれたりします。(勝手に補完する)
http://jsajax.com/TableInsertRowArticle157.aspx

静的なHTMLでtbodyを省略した場合はDOM構築時にtbodyを補完してるんだったかなー(余計なことに)。そのへんはちとうろ覚えです。

yoshimura 2009年12月17日 21:03

HTMLにtbody書かなくても勝手に入りますね。それでまたtd要素など探すときに思った場所になかったり。