How do I add a <table> using Element with Prototype in IE6? [closed]

Question

Using Prototype 1.6's "new Element(...)" I am trying to create a <table> element with both a <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>');

I'm then trying to inject copies of it like this:

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

My current workaround is to create a <div> instead of a <table> element, and then "update" it with all of the table HTML.

How does one successfully do this?

Answer 1

As it turns out, there's nothing wrong with the example code I provided in the question--it works in IE6 just fine. The issue I was facing is that I was also specifying a class for the <table> element in the constructor incorrectly, but omitted that from my example.

The "real" code was as follows, and is 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 fails in IE6 because it is wrong.

The correct way to add attributes to an element via this constructor is to provides 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>');

There is an error due to "class" being a reserved word in JavaScript. Doh!

Let this be a lesson to those who don't supply their actual code!

Answer 2

If prototypes' .update() method internally tries to set the .innerHTML it will fail in IE. In IE, the .innerHTML of a table element is readonly.

Source:

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