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

Discussion in 'Javascript' started by Sundew Shin, Jun 2, 2006.

  1. Sundew Shin

    Sundew Shin Guest

    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>

    --
    Wednus Project
    http://wednus.com
    Sundew Shin, Jun 2, 2006
    #1
    1. Advertising

  2. Sundew Shin

    BootNic Guest

    > "Sundew Shin" <> wrote:
    > news:....
    >
    > 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];
    */

    > 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 Thursday, June 01, 2006 9:29 PM

    Freedom defined is freedom denied.
    *Illuminatus*
    BootNic, Jun 2, 2006
    #2
    1. Advertising

  3. Sundew Shin

    Sundew Shin Guest

    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.
    =)

    BootNic wrote:
    > /*
    > 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
    #3
  4. Sundew Shin

    Randy Webb Guest

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

    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.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jun 2, 2006
    #4
  5. Sundew Shin

    RobG Guest

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

    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).


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


    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.

    [...]

    --
    Rob
    RobG, Jun 2, 2006
    #5
  6. Sundew Shin

    RobG Guest

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

    Randy Webb wrote:
    > 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.


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


    >> 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.


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


    >> 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.


    Or use insertRow.


    --
    Rob
    RobG, Jun 2, 2006
    #6
    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. osman
    Replies:
    5
    Views:
    384
    I Osman
    Dec 2, 2004
  2. El Kabong

    Browsers, browsers! Quo vadis?

    El Kabong, May 11, 2007, in forum: HTML
    Replies:
    23
    Views:
    895
    dorayme
    May 13, 2007
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    745
  4. Tony Arcieri
    Replies:
    14
    Views:
    453
    Tony Arcieri
    Dec 9, 2010
  5. Tony Arcieri
    Replies:
    0
    Views:
    407
    Tony Arcieri
    Dec 14, 2010
Loading...

Share This Page