« 【JavaScript】IE6のString.split()の不具合と対策 | トップページ | 【JavaScript】function定義方法による動作の差異(覚書) »

2007/12/09

【JavaScript】IE6でTABLE要素内をHTMLで書換える関数

IE6でTABLE/THEAD/TFOOT/TR要素内をHTML表記で書換えることができるような関数を作ってみました。
element.innerHTML='(HTML)';
とする代わりに、
replaceInnerHtml(element,'(HTML)');
として使用します。
上記要素以外の場合でも使えると思います(HEADとかBODYなどはダメですが)。
function    replaceInnerHtml(tgtElm, innerHTML) {
    for (;;) {
        if (typeof innerHTML!='string'||typeof tgtElm!='object'||tgtElm.nodeType!=1/*ELEMENT_NODE*/) break;
        try {
            tgtElm.innerHTML=innerHTML;
        }
        catch (e) {
            var chld;
            while (chld=tgtElm.firstChild) tgtElm.removeChild(chld);    //  remove all child elements
            if (innerHTML.match(/^\s*$/) ) break;   //  clear only
            
            var tagName=tgtElm.tagName.toLowerCase(), tmp, html='<'+tagName+'>'+innerHTML+'</'+tagName+'>';
            switch (tagName) {
                case    'thead' :
                case    'tbody' :
                case    'tfoot' :
                    tmp=document.createElement('table');
                    replaceInnerHtml(tmp, html);
                    break;
                case    'tr'    :
                    tmp=document.createElement('table');
                    replaceInnerHtml(tmp, '<tbody>'+html+'</tbody>');
                    tmp=tmp.firstChild;
                    break;
                default         :
                    tmp=document.createElement('div');
                    tmp.innerHTML=html;
                    break;
            }
            var tmpElm=tmp.firstChild;
            while (chld=tmpElm.firstChild) tgtElm.appendChild(chld);
        }
        break;
    }
    return tgtElm;
}
【テーブル置換サンプル】
THEAD要素
下のボタンを押して試して下さい。
TFOOT要素
【HTML】

【JavaScript】IE6におけるtable要素の初期化で、TABLE要素のinnerHTMLを直接書換えようとするとIE6ではエラーになってしまうと書きましたが、Microsoftによるとこれはやはり『仕様』とのこと。
PRB: Internet Explorer に Table.innerHTML を設定しているエラー
原因
TABLE と TFOOT と THEAD と TR 要素の innerHTML プロパティは、読み取り専用です。
状況
この動作は、仕様です。
仕様といわれてしまってはそれまでですが、やっぱり直接書換えたいような場合もあるんじゃないかなぁ、と思って上記のような関数を作成してみたしだい。
余談ですが、リンク(A)要素のinnerHTMLはIE6でも通常は書き込み可能ですが、
linkElement.innerHTML='<a href="http://~">hoge</a>';
のようにすると『未知の実行時エラーです。』と出ることに、『りんくぽっぷ』を作っていて気が付きました。
まぁ、リンク要素内にリンク要素を書くようなことは推奨されないとは思うんですが。Wikipediaなんかで実際にこうなっていたりする箇所があって、りんくぽっぷでエラーが出てしまい、原因究明にてこずりました(苦笑)。
【2007/12/09追記】
この話題、以前どっかで読んだ覚えがあったのですが、
未知の実行時エラー
でした。

« 【JavaScript】IE6のString.split()の不具合と対策 | トップページ | 【JavaScript】function定義方法による動作の差異(覚書) »

パソコン・インターネット」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: 【JavaScript】IE6でTABLE要素内をHTMLで書換える関数:

« 【JavaScript】IE6のString.split()の不具合と対策 | トップページ | 【JavaScript】function定義方法による動作の差異(覚書) »

戻るリンク追加

カレンダー

2020年3月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ