IE6 でプロトタイプを持つ要素を使用して <table> を追加するにはどうすればよいですか?[閉まっている]

Question

Prototype 1.6 の「new Element(...)」を使用して、<thead> と <tbody> の両方を含む <table> 要素を作成しようとしていますが、IE6 では何も起こりません。

var tableProto = new Element('table').update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

次に、次のようにそのコピーを挿入しようとしています。

$$('div.question').each(function(o) {
  Element.insert(o, { after:$(tableProto.cloneNode(true)) });
});

現在の回避策は、<table> 要素の代わりに <div> 要素を作成し、それをすべてのテーブル HTML で「更新」することです。

どうすればこれを成功させることができるでしょうか?

Answer 1

結局のところ、質問で提供したサンプル コードには何も問題はなく、IE6 では問題なく動作します。私が直面していた問題は、コンストラクター内の <table> 要素のクラスも間違って指定していましたが、それを例から省略していたことです。

「実際の」コードは次のとおりですが、正しくありません。

var tableProto = new Element('table', { class:'hide-on-screen'} ).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

これは Firefox では正しく動作しますが、IE6 では失敗します。 間違っている.

このコンストラクターを介して要素に属性を追加する正しい方法は、属性名だけでなく文字列を指定することです。次のコードは両方のブラウザで動作します。

var tableProto = new Element('table', { 'class':'hide-on-screen'} ).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

「class」がJavaScriptの予約語であるためエラーが発生します。ドー！

これを、情報を提供しない人への教訓にしましょう。 実際の コード！

Answer 2

プロトタイプの .update() メソッドが内部で .innerHTML を設定しようとすると、IE では失敗します。IEでは、 table要素の.innerHTMLは読み取り専用です.

ソース：

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html