471,624 Members | 1,878 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,624 software developers and data experts.

Creating table with DOM is invisible with IE ?

Hi,

I'm trying just to display a table on a webpage using DOM elements
created dynamically.

I really don't understand why IE doesn't display the document
successfully...
If I make a copy/paste of the output, I can see the data.
Mozilla displays successfully a table... Check this little code :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
</head>
<body onload="">
<table>

</table>
<p></p>
</body>

<script type="text/javascript">
var pItem = document.getElementsByTagName("p").item(0);
pItem.appendChild( document.createTextNode("TEST") );

function onLoaded(infoOn) {
var table = document.getElementsByTagName("table").item(0);

for(val in infoOn) {
currentRow = document.createElement("tr");
currentCell = document.createElement("td");
currentText = document.createTextNode(val);
currentCell.appendChild( currentText );
currentRow.appendChild(currentCell);
table.appendChild(currentRow);
}
table.style.visibility = "visible";
table.setAttribute("border", "1");

}
onLoaded(document.getElementsByTagName("table"));
</script>
</html>
On IE, this code "displays" only "TEST" but try Copy/paste and the data
will be pasted... so what is the problem ?

Thank you very much.

Mar 26 '06 #1
4 2299
GRenard said the following on 3/26/2006 1:31 AM:
Hi,

I'm trying just to display a table on a webpage using DOM elements
created dynamically.

I really don't understand why IE doesn't display the document
successfully...
<URL:
http://msdn.microsoft.com/library/de...dude100499.asp


IE wants a TBODY. Whether you hard code it or create it dynamically.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Mar 26 '06 #2
Thank you very much, it works perfectly ! It just weird that I can use
tr or td hardcoded but not dynamically directly...

Thank you again !

Mar 26 '06 #3
GRenard wrote:
Hi,

I'm trying just to display a table on a webpage using DOM elements
created dynamically.

I really don't understand why IE doesn't display the document
successfully...
If I make a copy/paste of the output, I can see the data.
Mozilla displays successfully a table... Check this little code :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
</head>
<body onload="">
<table>

</table>
<p></p>
</body>

<script type="text/javascript">
var pItem = document.getElementsByTagName("p").item(0);
pItem.appendChild( document.createTextNode("TEST") );

function onLoaded(infoOn) {
var table = document.getElementsByTagName("table").item(0);

for(val in infoOn) {
currentRow = document.createElement("tr");
As Randy said, IE requires that the tr element be added to a tbody, not
directly to the table (and use var to keep variables local).

Rather than creating a tbody element, you can also use insertRow:

var currentRow = table.insertRow(-1);

Passing a row index of -1 will insert the row as the last row of the table.

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

currentCell = document.createElement("td");
You can also use:

var currentCell = currentRow.insertCell(-1);

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

currentText = document.createTextNode(val);
currentCell.appendChild( currentText );
currentRow.appendChild(currentCell);
If insertCell is used, the cell is already added to the row so this line
isn't required.

table.appendChild(currentRow);
If insertRow is used, the row is already added to the table so this line
isn't required either.

}
table.style.visibility = "visible";
table.setAttribute("border", "1");

}
onLoaded(document.getElementsByTagName("table"));
</script>
</html>
On IE, this code "displays" only "TEST" but try Copy/paste and the data
will be pasted... so what is the problem ?

Thank you very much.

--
Rob
Mar 26 '06 #4


GRenard wrote:
It just weird that I can use
tr or td hardcoded but not dynamically directly...


That is how HTML as an SGML application works, if your document markup
has e.g.
<table>
<tr>
<td>
then the SGML parser adds a tbody element in the DOM tree to be a child
of the table element and the parent of the tr element.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Mar 26 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Ivo | last post: by
1 post views Thread by andrewkooi | last post: by
1 post views Thread by Susan Geller | last post: by
4 posts views Thread by Net Developer | last post: by
11 posts views Thread by CodeLeon | last post: by
5 posts views Thread by my.shabby.sheep | last post: by
2 posts views Thread by chris | last post: by
1 post views Thread by XIAOLAOHU | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.