テーブル内のinnerHTML

IEでは、テーブルのinnerHTMLプロパティは読み取り専用プロパティであることが知られています。 support.microsoft.com/kb/239832



その結果、テーブルの内容を変更するには、DOMを実行する必要があります。 特に各セルにイベントが割り当てられている場合、これは必ずしも便利ではありません。

私はjqueryでこの状況が修正されることを望んでいました。 しかし、ありません。 コード

$('#id_tr').html('<td><button onclick="my_f(new_id)">new action</button></td>');





また、正常に動作しません。



その結果、シンプルでエレガントなソリューションが見つかりました。



jqueryで関数の実装を指定しますが、「純粋な」javascriptに簡単に書き換えることができます。

function set_html(obj,new_html){



function replace_html(obj,old_html,new_html){

var obj_parent=$(obj).parents( '' )[0];

var tn=$(obj_parent).attr( 'tagName' ).toLowerCase();

if (tn == 'table' || tn == 'tbody' || tn == 'thead' || tn == 'tr' || tn == 'th' || tn == 'td' ) {

replace_html(obj_parent,old_html,new_html);

}

else {

var cur_html=$(obj_parent).html();

var repl_html=cur_html.replace(old_html,new_html);

$(obj_parent).html(repl_html);

}

}



var tn=$(obj).attr( 'tagName' ).toLowerCase();

if (tn == 'table' || tn == 'tbody' || tn == 'thead' || tn == 'tr' || tn == 'th' || tn == 'td' ) {

var xid = new Date().getTime().toString()

$(obj).append(xid);

replace_html(obj,$(obj_container).html(),new_html);

}

else {

$(obj).html(new_html);

}

}



* This source code was highlighted with <font size="1" color="gray">Source Code Highlighter .

その結果、テーブルの内容を変更するには、そのようなコードを実行するだけで十分です

set_html($('#id_tr'),'<td><button onclick="my_f(new_id)">new action</button></td>');