ちょちょいとした計算ツールを使用するのにJavaScriptは便利だ。

だが問題がある、IEとFirefoxでは同一のスクリプトが動いたり動かなかったりすることがある。

今回はtbodyタグに関する話。

計算結果を表形式で表したい時にHTMLのtableタグを使用する。

得にtbodyタグの中身を可変編集することはよくするテクニックの一つだ。

以下のコードを見てもらいたい。

-–HTML

-–javaScript

function main(){

//HTML上のtbodyを取得

var tb = document.getElementById(“tableBody”);

//書き込む内容を作成

var tbHTML = ‘1hoge’

           + ‘2hogehoge’;

tb.innerHTML = tbHTML;

}

上記コードはFireFoxやChromeだと動くのだが、

IEでは動かない。

ﾅﾝﾃﾞｴｴｴと思って調べてみると。

**Internet Explorer で **

PRB エラー設定 table.innerHTML

http://support.microsoft.com/kb/239832/ja

tbodyのinnerHTMLは読取り専用だと！

なのでこう書かないといけない。

-–javaScript

function main(){

//HTML上のtbodyを取得

var tb = document.getElementById(“tableBody”);

//DOMオブジェクトを作成

var tr = document.createElement(’tr’);

        var td1 = document.createElement(’td’);

        var td2 = document.createElement(’td’);

        //作成したオブジェクトを組み合わせてtbodyの中を作成

        for(var i = 1; i < 3; i++){

            td1.innerHTML = i;

            td2.innerHTML = (i==1) ? “hoge”

                                               : “hogehoge”;

            tr.appendChild(td1);

            tr.appendChild(td2);

tb.appendChild(tr);

        }

}