How to add <table> using prototype element in IE6?

Question

Using Prototype 1.6 "new Element (...)" I'm trying to create a table <table> element with both <thead> and <tbody> but nothing happens in 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>'); 

Then I try to enter copies of it as follows:

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

My current workaround is to create a <div> instead of a table <table> element, and then “refresh” it with the entire HTML table.

How to successfully do this?

Answer 1

As it turned out, there is nothing wrong with the sample code that I presented in the question - it works fine in IE6. The problem I encountered is that I also did not specify the class for the <table> element in the constructor correctly, but omitted this from my example.

The "real" code was as follows and incorrect:

 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>'); 

This works correctly in Firefox, but does not work in IE6 because it is wrong .

The proper way to add attributes to an element through this constructor is to provide strings, not just attribute names. The following code works in both browsers:

 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>'); 

An error has occurred because the “class” is a reserved word in JavaScript. Doh!

Let this be a lesson for those who do not provide their actual code!

Answer 2

If the protopypes.update () method internally tries to install .innerHTML, it will not work in IE. In IE, the .innerHTML table element is readonly .

A source:

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