[thelist] innerHTML on a table (Was: AJAX Tip)
Christian Heilmann
codepo8 at gmail.com
Fri Apr 7 07:26:34 CDT 2006
> > > In case someone reading the above thought of doing some innerHTML in
> > > tables:
> You don't need to use innerHTML at all - just traverse the dom and find the
> right node and append(node.appendChild(newnode)) it - this works in IE as
> well as firefox.
> look here:
> http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
> tables have their own little section
> http://developer.mozilla.org/en/docs/DOM:table#HTML_Form_Element_Interface
Yes, we know, however that is not the issue. The problem is that MSIE
does not show a table generated with DOM unless you also have a TBODY
in it.
<tip type="JavaScript and DOM" author="Chris Heilmann">
If you use createElement and appendChild to create tables in
JavaScript always make sure to use a tbody in the table.
function dotables(){
// table without tbody
var table=document.createElement('table');
var tr=document.createElement('tr');
var td=document.createElement('td')
td.appendChild(document.createTextNode('foo'));
tr.appendChild(td);
table.appendChild(tr);
document.body.appendChild(table);
// table with tbody
var table2=document.createElement('table');
var tr2=tr.cloneNode(true);
var tbody=document.createElement('tbody');
tbody.appendChild(tr2);
table2.appendChild(tbody);
document.body.appendChild(table2);
}
window.onload=dotables;
This will result in two tables in Firefox, but only one in MSIE, as
the first one lacks a tbody.
The table is inside the document, it is just not rendered!
Proof: http://icant.co.uk/sandbox/createTables.html
With thanks to Pavel Dudrenov and Alex Robinson.
</tip>
More information about the thelist
mailing list