Issue with DomHelper IE table handling

[ncubeait]

Hi Jack,

Great work on the library!.

I believe I found a bug in the IE table hack work-around. Basically, "firstChild" was being called one too many times on tempTableEl. Here is the patched function:



var insertIntoTable = function(tag, where, el, html){
if(!tempTableEl){
tempTableEl = document.createElement('div');
}
var node;
if(tag == 'table' || tag == 'tbody'){
tempTableEl.innerHTML = '<table><tbody>'+html+'</tbody></table>';
node = tempTableEl.firstChild.firstChild;
}else{
tempTableEl.innerHTML = '<table><tbody><tr>'+html+'</tr></tbody></table>';
node = tempTableEl.firstChild.firstChild.firstChild;
}
if(where == 'beforebegin'){
el.parentNode.insertBefore(node, el);
return node;
}else if(where == 'afterbegin'){
el.insertBefore(node, el.firstChild);
return node;
}else if(where == 'beforeend'){
el.appendChild(node);
return node;
}else if(where == 'afterend'){
el.parentNode.insertBefore(node, el.nextSibling);
return node;
}
}


Now the only problem with this work-around is that if you then try to dynamically set the innerHTML on one of the moved cells, IE will throw an error.

To try out, simply try to perform the following after moving the node:


node.innerHTML = '123';


If you do, IE will throw an "Unknown runtime error". Any suggestions on how to get around this?

William

[jack.slocum]

It was the right amount of firstChild calls. Your patched function is returning the wrong child, which is why you are getting the runtime error.

In your version, you have:

tempTableEl.firstChild.firstChild for a tr insert.

The tempTableEl is the div, the first child is the table, 2nd is the tbody and the 3rd (which you deleted) would be the row. So you are inserting the tbody instead of the row.

[JeffHowden]

... The tempTableEl is the div, the first child is the table, 2nd is the tbody and the 3rd (which you deleted) would be the row. So you are inserting the tbody instead of the row.

For those that don't know, IE will include a tbody as the first child in a table regardless of whether one is in the source or a DOM generated table or not. That's bound to throw you off a bit when walking the DOM to gain access to a particular row or cell.