DOM build table IE trouble ..........

W

whisher

Hi.
I'm not able to understand
why this simple snippet doesn't
work with IE.
It works fine with FF and Opera 9.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
function buildTable()
{
var content = document.getElementById('content');
var mTable = document.createElement('table');
mTable.setAttribute('cellspacing','0');
mTable.setAttribute('cellpadding','0');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('pippo'));
tr.appendChild(td);
mTable.appendChild(tr);
alert(mTable);
content.appendChild(mTable);
}
window.onload = function()
{
buildTable();
}

</script>

</head>
<body>
<div id="content"></div>
</body>
</html>


Bye :(
 
M

Martin Honnen

whisher said:
var mTable = document.createElement('table');
Click to expand...


mTable.cellSpacing = '0';
mTable.cellPadding = '0';

var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('pippo'));
tr.appendChild(td);
Click to expand...
tbody.appendChild(tr);

mTable.appendChild(tbody);
 
D

Daz

whisher said:
Hi.
I'm not able to understand
why this simple snippet doesn't
work with IE.
It works fine with FF and Opera 9.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
function buildTable()
{
var content = document.getElementById('content');
var mTable = document.createElement('table');
mTable.setAttribute('cellspacing','0');
mTable.setAttribute('cellpadding','0');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('pippo'));
tr.appendChild(td);
mTable.appendChild(tr);
alert(mTable);
content.appendChild(mTable);
}
window.onload = function()
{
buildTable();
}

</script>

</head>
<body>
<div id="content"></div>
</body>
</html>


Bye :(
Click to expand...

I believe you are missing a <tbody> element. I am not sure if IE will
automatically create it for you, so you'd be better off creating it
manually, and then appending the TRs to that, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
function buildTable()
{
var content = document.getElementById('content');
var mTable = document.createElement('table');
mTable.setAttribute('cellspacing','0');
mTable.setAttribute('cellpadding','0');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('pippo'));
tr.appendChild(td);
tbody.appendChild(tr);
mTable.appendChild(tbody);
alert(mTable);
content.appendChild(mTable);
}
window.onload = function()
{
buildTable();
}

</script>

</head>
<body>
<div id="content"></div>
</body>
</html>

I can't confirm whether or not it works in IE, but I see no reason why
it shouldn't, as the code as it was worked fine with Firefox, but then
again, Firefox is smarter, and more forgiving of errors.

Hope that helps.

All the best.

Daz.
 
W

whisher

Daz said:
I believe you are missing a <tbody> element. I am not sure if IE will
automatically create it for you, so you'd be better off creating it
manually, and then appending the TRs to that, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
function buildTable()
{
var content = document.getElementById('content');
var mTable = document.createElement('table');
mTable.setAttribute('cellspacing','0');
mTable.setAttribute('cellpadding','0');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('pippo'));
tr.appendChild(td);
tbody.appendChild(tr);
mTable.appendChild(tbody);
alert(mTable);
content.appendChild(mTable);
}
window.onload = function()
{
buildTable();
}

</script>

</head>
<body>
<div id="content"></div>
</body>
</html>

I can't confirm whether or not it works in IE, but I see no reason why
it shouldn't, as the code as it was worked fine with Firefox, but then
again, Firefox is smarter, and more forgiving of errors.

Hope that helps.

All the best.

Daz.
Click to expand...

No, with IE doesn't work.

I've fixed the problem with:


function buildTable()
{
var content = document.getElementById('content');
var mTable = document.createElement('table');
mTable.setAttribute('cellspacing','0');
mTable.setAttribute('cellpadding','0');
var mTBody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('pippo'));
tr.appendChild(td);
mTBody.appendChild(tr);
mTable.appendChild(mTBody);
content.appendChild(mTable);
}


Bye.
 
W

whisher

whisher said:
No, with IE doesn't work.

I've fixed the problem with:


function buildTable()
{
var content = document.getElementById('content');
var mTable = document.createElement('table');
mTable.setAttribute('cellspacing','0');
mTable.setAttribute('cellpadding','0');
var mTBody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('pippo'));
tr.appendChild(td);
mTBody.appendChild(tr);
mTable.appendChild(mTBody);
content.appendChild(mTable);
}


Bye.
Click to expand...

Thanks a lot buddies.

Bye.
 
R

Randy Webb

Daz said the following on 1/14/2007 1:49 PM:

I can't confirm whether or not it works in IE, but I see no reason why
it shouldn't, as the code as it was worked fine with Firefox, but then
again, Firefox is smarter, and more forgiving of errors.
Click to expand...

Then why does FF get this one dead wrong and IE gets it right? The
reason the original failed is IE won't allow you to append TR to the
TABLE, it requires you to append it to the TBODY - which is in
accordance with specs. FF on the other hand will assume you want a TBODY
and create it for you.

And, FF is "more forgiving of errors"? I guess you have never scripted
IE then.....
 
R

RobG

whisher said:
Hi.
I'm not able to understand
why this simple snippet doesn't
work with IE.
It works fine with FF and Opera 9.
Click to expand...

The others have given you the reason and a solution, but for
simplicity, try insertRow and insertCell. They are convenience methods
designed specifically for building tables. It saves you having to
create and append a tbody, and also saves the append step for rows and
cells.

function buildTable()
{
var content = document.getElementById('content');
var mTable = document.createElement('table');
mTable.setAttribute('cellspacing','0');
mTable.setAttribute('cellpadding','0');
Click to expand...

var tr = mTable.insertRow(-1);
var td = tr.insertCell(-1);
td.appendChild(document.createTextNode('pippo'));
Click to expand...
content.appendChild(mTable);
}
window.onload = function()
{
buildTable();
}
Click to expand...

<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >
 
D

Daz

Randy said:
Daz said the following on 1/14/2007 1:49 PM:



Then why does FF get this one dead wrong and IE gets it right? The
reason the original failed is IE won't allow you to append TR to the
TABLE, it requires you to append it to the TBODY - which is in
accordance with specs. FF on the other hand will assume you want a TBODY
and create it for you.
Click to expand...
Did you not notice the corrections I'd made to the original script?
And, FF is "more forgiving of errors"? I guess you have never scripted
IE then.....
Click to expand...
Appending the TR to a TABLE and not a TBODY, I believe is an error. One
that Firefox figures out and fixes, and IE turns it's nose up at. I am
not arguing about specs, but simply stating that Firefox is more
forgiving of errors, which you just confirmed in your first
paragraph... Sorry Randy, but you are getting defnsive over nothing.
 
D

Daz

RobG said:
The others have given you the reason and a solution, but for
simplicity, try insertRow and insertCell. They are convenience methods
designed specifically for building tables. It saves you having to
create and append a tbody, and also saves the append step for rows and
cells.



var tr = mTable.insertRow(-1);
var td = tr.insertCell(-1);



<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >
Click to expand...
Thanks for that Rob. I for one, was totally unaware of those methods.
 
R

Randy Webb

Daz said the following on 1/14/2007 6:31 PM:
Appending the TR to a TABLE and not a TBODY, I believe is an error. One
that Firefox figures out and fixes, and IE turns it's nose up at. I am
not arguing about specs, but simply stating that Firefox is more
forgiving of errors, which you just confirmed in your first
paragraph...
Click to expand...

That is just it though, FF is *not* more forgiving, it adheres to the
standards a lot more than IE does but in this instance IE got it right.
It is very rare that IE gets it spec right but FF gets it wrong. And to
say that FF is more forgiving of errors is simply wrong.
 
D

Daz

Randy said:
Daz said the following on 1/14/2007 6:31 PM:

That is just it though, FF is *not* more forgiving, it adheres to the
standards a lot more than IE does but in this instance IE got it right.
It is very rare that IE gets it spec right but FF gets it wrong. And to
say that FF is more forgiving of errors is simply wrong.
Click to expand...

I agree with most of what you say there, but I can't see where Firefox
got it wrong. Perhaps one of us has misread the original post? From
what I could see. Firefox rendered the page correctly with the error,
and IE didn't, but I assume that now, both render the page correctly.

Best wishes.

Daz.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

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
Only one table shows up with the information 2
Javascript DOM 1
Sort by number of characters 1
How to have two html audio players on one page? 0
Image shifts to the right when export the page to pdf 4
Inserting Tables in IE 6 using W3C DOM techniques. 10
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 447

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,074
Latest member
StanleyFra

Latest Threads

Top