Creating table with DOM is invisible with IE ?

03-26-2006

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.

03-26-2006

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/

03-26-2006

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 !

03-26-2006

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

03-26-2006

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/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Making 1 control invisible while showing another in the exact location of the invisible one	Andy B	ASP .Net	5	05-29-2008 03:08 AM
Invisible - Succinic acid : (AMBER ACID) Invisible	krithika.143@gmail.com	C++	0	04-14-2008 06:59 PM
ColGroup for a table element gets lost when the table element is made visible/invisible	TS	ASP .Net	5	08-16-2007 11:26 AM
New DOM elements invisible in IE, fine in FireFox	robert.oschler@gmail.com	Javascript	3	04-04-2006 02:03 PM
table server control -- make column invisible	Susan Geller	ASP .Net	1	03-02-2004 11:56 PM