« Sortable.createでonUpdateが効かない | Main | ActionView::Helpers::FormHelperをlocal varibaleで使いたい »

2006年4月10日

Builder.nodeとtableとIE

[ カテゴリ： Web ]

Builder.nodeでテーブルを作る話。 例えば<div id="tbl"></div>に対して、次のコードを実行してみます。 

$('tbl').appendChild(
  Builder.node('table', [
    Builder.node('tr', [
      Builder.node('th', {rowspan:2}, 'TH'),
      Builder.node('td', 'TD1'),
    ]),
    Builder.node('tr', [
      Builder.node('td', 'TD2'),
    ]),
  ]));

期待としては以下のようになって欲しいわけですね（見やすいようにborderいれてます）。

THTD1
TD2

ところがこのコード、IEでは動きません。tableを作ったとき、 その内部にtbodyができてしまうのです。すなわち、超適当に書くと、 

var node = $('tbl').appendChild(Builder.node('table'));
if (node.firstChild && node.firstChild.nodeName == 'TBODY') {
  node = node.firstChild;
}
node.appendChild(
    Builder.node('tr', [
      Builder.node('th', {rowspan:2}, 'TH'),
      Builder.node('td', 'TD1'),
    ]));
node.appendChild(
    Builder.node('tr', [
      Builder.node('td', 'TD2'),
    ]));

みたいなことをしないといけないわけです。

さてこれで動くかというと、実はまだだめです。 実行してみるとわかりますが、 rowspanが効いていません。 しかし、生成されたhtmlにはしっかりrowspanがついてるんですね。 というわけでこれはIEのバグではないかと。 すなわち、IEでJavascriptによって動的にtableを生成する場合、 現状ではrowspanは使えないということのようです。

Posted at 19:47

Comments

Post a comment




Remember Me?