Creating table with DOM is invisible with IE ?

Discussion in 'Javascript' started by GRenard, Mar 26, 2006.

  1. GRenard

    GRenard Guest

    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.
     
    GRenard, Mar 26, 2006
    #1
    1. Advertising

  2. GRenard

    Randy Webb Guest

    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/default.asp?url=/library/en-us/dndude/html/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/
     
    Randy Webb, Mar 26, 2006
    #2
    1. Advertising

  3. GRenard

    GRenard Guest

    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 !
     
    GRenard, Mar 26, 2006
    #3
  4. GRenard

    RobG Guest

    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
     
    RobG, Mar 26, 2006
    #4
  5. 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/
     
    Martin Honnen, Mar 26, 2006
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Susan Geller
    Replies:
    1
    Views:
    403
    =?Utf-8?B?U3VyZXNo?=
    Mar 2, 2004
  2. chuckdfoster

    Make HTML Table Invisible

    chuckdfoster, Dec 6, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    14,110
    chuckdfoster
    Dec 6, 2005
  3. TS
    Replies:
    5
    Views:
    3,684
    Steven Cheng[MSFT]
    Aug 16, 2007
  4. Andy B
    Replies:
    5
    Views:
    594
    Andy B
    May 29, 2008
  5. Replies:
    3
    Views:
    149
Loading...

Share This Page