can't dynamically generate table in Internet explorer

Discussion in 'Javascript' started by aric.bills@gmail.com, Oct 13, 2006.

  1. Guest

    Hello all,

    I'm a novice Javascript programmer, and I'm having browser
    compatability issues regarding dynamic generation of tables. The
    following content generates "hello" in Firefox 1.5, but just a blank
    page in IE 6. Can anybody tell me what I should change to make IE
    happy? Even better, is there any kind of tutorial out there on
    dynamically generating tables?

    Many thanks,
    Aric


    <html>
    <head>
    <title> Test </title>
    <script language="javascript">
    <!--

    window.onload = init;

    function init() {

    var el = document.createElement('table');
    var row = document.createElement('tr');
    var col = document.createElement('td');
    col.appendChild(document.createTextNode('hello'));
    row.appendChild(col);
    el.appendChild(row);
    document.getElementById('mydiv').appendChild(el);
    }

    // -->
    </script>
    </head>
    <body>
    <div ID="mydiv">
    </div>
    </body>
    </html>
    , Oct 13, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > Hello all,
    >
    > I'm a novice Javascript programmer, and I'm having browser
    > compatability issues regarding dynamic generation of tables. The
    > following content generates "hello" in Firefox 1.5, but just a blank
    > page in IE 6. Can anybody tell me what I should change to make IE
    > happy?


    Every HTML table must have a tbody element, though the tags in the HTML
    source are optional. When creating a table using either HTML or
    script, the tbody element is automatically added by the browser.

    When using DOM Core methods createElement and appendChild to add rows
    to a table, most browsers will allow you to append the row to the table
    object, even though strictly speaking it should be appended as a child
    of the tbody. IE doesn't do that, you have to add it to the tbody.

    The simple solution is to use the DOM HTML methods, insertRow and
    insertCell[1]. Here IE is also a little different in that if you don't
    supply a parameter, it will add the row or cell as the last in the
    collection, most other browsers will barf. If you want the new row as
    the last row, just use insertRow(-1).


    > Even better, is there any kind of tutorial out there on
    > dynamically generating tables?


    There are some, but I wouldn't recommend them. The principles are
    fairly simple: create a tables using createElement, then add rows using
    the table's insertRow() method and cells using the row's insertCell()
    method. Remove rows using table.deleteRow().

    If you want to create table sections, you can do that too: they have
    the same methods as tables do for inserting and deleting rows.

    The following link is to the Gecko DOM Table Interface page. It's not
    complete, though the examples are better than some - it also has links
    to the appropriate W3C specifications.

    <URL:
    http://developer.mozilla.org/en/docs/DOM:table#HTML_Table_Element_Interface
    >


    >
    > Many thanks,
    > Aric
    >
    >
    > <html>
    > <head>
    > <title> Test </title>
    > <script language="javascript">


    The language attribute is deprecated, type is required:

    <script type="text/javascript">

    > <!--


    Do not use HTML comment delimiters inside script elements, they are
    completely unnecessary and often cause problems.

    >
    > window.onload = init;
    >
    > function init() {
    >
    > var el = document.createElement('table');
    > var row = document.createElement('tr');


    var row = el.insertRow(-1);

    > var col = document.createElement('td');


    var col = row.insertCell(-1);

    > col.appendChild(document.createTextNode('hello'));


    If using insertRow/Cell, they are already added, there is no need to
    explicitly append them so the next two lines are not required.

    > row.appendChild(col);
    > el.appendChild(row);


    But you still need to add the table to the document of course. :)

    > document.getElementById('mydiv').appendChild(el);
    > }

    [...]

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

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



    --
    Rob
    RobG, Oct 13, 2006
    #2
    1. Advertising

  3. Guest

    Rob,

    Thanks for the helpful information and the clear way you explained
    things. That was just what I needed.

    Much obliged,
    Aric
    , Oct 13, 2006
    #3
    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. cmay
    Replies:
    0
    Views:
    1,113
  2. Ed Hauptman
    Replies:
    7
    Views:
    992
    Ed Hauptman
    Aug 7, 2009
  3. Nathan Sokalski
    Replies:
    12
    Views:
    1,928
    rob^_^
    Oct 2, 2009
  4. John Smith
    Replies:
    1
    Views:
    123
    Evertjan.
    Mar 12, 2005
  5. Thomas
    Replies:
    6
    Views:
    169
Loading...

Share This Page