All browsers are cool but IE: div, form, table, input.. where's the table?

Sundew Shin · Jun 2, 2006

I think I can make a good interesting list of postings under this
subject header, 'All browsers are cool but IE.'

Anyway, the following code will show a table with an input box labeled,
'name', on all browsers (Gecko, KHTML, Opera) except IE.
Is there anybody ever hit on this issue before?
Thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title></head>
<body>
<script type='text/javascript'>
var div = document.createElement('div');
var form = document.createElement('form');
div.appendChild(form);

var table = document.createElement('table');
form.appendChild(table);

var tr = document.createElement('tr');
table.appendChild(tr);

var td = document.createElement('td');
td.appendChild(document.createTextNode('name:'));
tr.appendChild(td);

td = document.createElement('td');
var field = document.createElement('input');
td.appendChild(field);
tr.appendChild(td);

document.body.appendChild(div);
</script>
</body>
</html>

BootNic · Jun 2, 2006

Sundew Shin said:
I think I can make a good interesting list of postings under this
subject header, 'All browsers are cool but IE.'

Anyway, the following code will show a table with an input box
labeled, 'name', on all browsers (Gecko, KHTML, Opera) except IE.
Is there anybody ever hit on this issue before?
Thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title></head>
<body>
<script type='text/javascript'>
var div = document.createElement('div');
var form = document.createElement('form');
div.appendChild(form);

var table = document.createElement('table');
form.appendChild(table);

/*
var tbody=document.createElement('tbody')
table.appendChild(tbody);
var tr = document.createElement('tr');
tbody.appendChild(tr);
*/

//OR

/*
table.insertRow(-1);
var tr=table.rows[table.rows.length-1];
*/

Sundew Shin · Jun 2, 2006

A ha! 'tbody' was the keyword here. Thanks a lot!
I tried many different things. for example, adding this codeline at the
end of the script block seemed work:

div.innerHTML = div.innerHTML; // could be just: div.innerHTML += '';

This showed the table containing the input element, but 'form.submit()'
didn't work anymore. so I compared the innerHTML of the div before the
codeline and after the codeline and noticed that the only difference is
the existence of '<TBODY>' element.
Since I usually just ignored these elements, THEAD, TBODY, TFOOT, I
just ignored it, but, there you go. that was the thing.

Now everyone is happy. =)
So, for IE, is it general that we should provide at least 'tbody' when
we construct a table using 'createElement'?

Again. thank you so much. you saved whole lot of my time and headache.
=)

Randy Webb · Jun 2, 2006

Sundew Shin said the following on 6/1/2006 10:00 PM:

A ha! 'tbody' was the keyword here. Thanks a lot!

With regards to tables, tbodys, and browsers, IE gets this one right and
everybody else gets it wrong.

I tried many different things. for example, adding this codeline at the
end of the script block seemed work:

div.innerHTML = div.innerHTML; // could be just: div.innerHTML += '';

That is because IE is normalizing it (adding the TBODY) then reinserting it.

This showed the table containing the input element, but 'form.submit()'
didn't work anymore. so I compared the innerHTML of the div before the
codeline and after the codeline and noticed that the only difference is
the existence of '<TBODY>' element.

Yep. IE normalized it to fix incomplete code.

Since I usually just ignored these elements, THEAD, TBODY, TFOOT, I
just ignored it, but, there you go. that was the thing.

Now everyone is happy. =)
So, for IE, is it general that we should provide at least 'tbody' when
we construct a table using 'createElement'?

Yes.

RobG · Jun 2, 2006

BootNic wrote:
[...]

/*
table.insertRow(-1);
var tr=table.rows[table.rows.length-1];
*/

Better:

var tr = table.insertRow(-1);

insertRow adds the row to the table and returns a reference to the new
tr element (for the OP: there's no need to use appendChild).

These 3 lines can be replaced with:

var td = tr.insertCell(-1);
td.appendChild(document.createTextNode('name:'));

insertCell works just like insertRow, only with td elements.

[...]

RobG · Jun 2, 2006

Randy said:
Sundew Shin said the following on 6/1/2006 10:00 PM:

With regards to tables, tbodys, and browsers, IE gets this one right and
everybody else gets it wrong.

IE seems to pick the strangest times to decide to strictly interpret the
W3C DOM Spec.

That is because IE is normalizing it (adding the TBODY) then reinserting
it.

Yep. IE normalized it to fix incomplete code.

'Incomplete' but standards compliant. The tbody tags are optional,
though the element isn't.

Yes.

Or use insertRow.

Only one table shows up with the information	2	Mar 29, 2023
How can I create a table using the input element?	1	Mar 25, 2022
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Image shifts to the right when export the page to pdf	4	May 5, 2023
How to have two html audio players on one page?	0	May 3, 2022
DOM build table IE trouble ..........	10	Jan 14, 2007
Javascript DOM	1	Mar 29, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023

All browsers are cool but IE: div, form, table, input.. where's the table?

Sundew Shin

BootNic

Sundew Shin

Randy Webb

RobG

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads