create a new row in a table

Discussion in 'Javascript' started by Peter Kirk, Sep 27, 2004.

  1. Peter Kirk

    Peter Kirk Guest

    Hi there

    can someone please help me with creating dynamic content in a table? For
    example, see the below javascript and html - why is a new row not created in
    the table when I click the button? (I am using Internet Explorer 6).

    <html>
    <head>
    <title>TEST</title>
    <script language="javascript">
    function addField() {
    alert( 'Add Field' );
    my_div.innerHTML = my_div.innerHTML + "<tr><td>new row</td></tr>";
    }
    </script>
    </head>

    <body>
    <table border="1">
    <tr>
    <td>
    first row
    </td>
    </tr>

    <div id="my_div"></div>

    <tr>
    <td>
    <input type="button" value="click me"
    onclick="javascript:addField()" >
    </td>
    </tr>
    </table>
    </body>
    </html>

    Thanks,
    Peter
     
    Peter Kirk, Sep 27, 2004
    #1
    1. Advertising

  2. Peter Kirk

    kaeli Guest

    In article <4157cf8c$>, "Peter Kirk" <peter> enlightened us
    with...
    > Hi there
    >
    > can someone please help me with creating dynamic content in a table? For
    > example, see the below javascript and html - why is a new row not created in
    > the table when I click the button? (I am using Internet Explorer 6).
    >


    Invalid HTML.

    This is a horrible way to make dynamic tables, too.

    > </tr>
    >
    > <div id="my_div"></div>


    A div is not allowed to be the child of TBODY.
    TBODY has only TR as a child.
    http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TBODY
    <!ELEMENT TBODY O O (TR)+ -- table body -->

    >
    > <tr>
    > <td>
    > <input type="button" value="click me"
    > onclick="javascript:addField()" >


    onClick is already script. Drop the "javascript:" stuff from it.
    onClick="addField()"

    To make dynamic table rows, use createElement and appendChild.
    Create the element, then append it to TBODY. Or use of the insert methods or
    replace if you'd prefer that.

    --
    --
    ~kaeli~
    The definition of a will?... (It's a dead giveaway.)
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 27, 2004
    #2
    1. Advertising

  3. Peter Kirk

    Peter Guest

    Hi, thanks for the response...

    "kaeli" <> skrev i en meddelelse
    news:...
    > In article <4157cf8c$>, "Peter Kirk" <peter> enlightened

    us
    > > can someone please help me with creating dynamic content in a table? For
    > > example, see the below javascript and html - why is a new row not

    created in
    > > the table when I click the button? (I am using Internet Explorer 6).
    > >

    >
    > Invalid HTML.
    >
    > This is a horrible way to make dynamic tables, too.


    Quite likely.... I know zip about javascript, and almost zip about html....

    > > </tr>
    > >
    > > <div id="my_div"></div>

    >
    > A div is not allowed to be the child of TBODY.


    OK - that's what you mean by it being invalid - a DIV is not allowed inside
    a TABLE? Don't really know what a "DIV" is, just thought it was a way to
    create a label you could reference from other places in the html.


    > TBODY has only TR as a child.
    > http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TBODY
    > <!ELEMENT TBODY O O (TR)+ -- table body -->


    What is "TBODY" actually. Is it like TABLE?


    > >
    > > <tr>
    > > <td>
    > > <input type="button" value="click me"
    > > onclick="javascript:addField()" >

    >
    > onClick is already script. Drop the "javascript:" stuff from it.
    > onClick="addField()"
    >
    > To make dynamic table rows, use createElement and appendChild.
    > Create the element, then append it to TBODY. Or use of the insert methods

    or
    > replace if you'd prefer that.


    OK thanks. I've got a place to start looking now.
     
    Peter, Sep 27, 2004
    #3
  4. Peter Kirk

    kaeli Guest

    OT: proper HTML (was Re: create a new row in a table)

    In article <>, peter@ciber enlightened us with...
    >
    > Quite likely.... I know zip about javascript, and almost zip about html....
    >


    Learn HTML first. You'll never code decent DHTML until you do.

    > > > </tr>
    > > >
    > > > <div id="my_div"></div>

    > >
    > > A div is not allowed to be the child of TBODY.

    >
    > OK - that's what you mean by it being invalid - a DIV is not allowed inside
    > a TABLE? Don't really know what a "DIV" is, just thought it was a way to
    > create a label you could reference from other places in the html.
    >


    No, HTML is a structured layout language. It has elements. Elements have
    attributes.
    Documents have structure, and that structure is pre-determined to a point.
    A DIV is a block-level element. As is P. SPAN is NOT a block-level element.
    A table is a table, and as such, much have a certain structure. TBODY is part
    of that and is implied if not explicitly stated.

    This, in a nutshell, is the structure. (lots more elements are allowed, but
    this is sufficient for now)

    TABLE
    -THEAD
    -TBODY
    -TR
    -TD
    -anything you want, including DIVS
    -TFOOT

    So, what you were trying to do in your code was append a table row to a div.
    That's not allowed. A table row can only be the child element of a table
    head, body, or foot.

    >
    > > TBODY has only TR as a child.
    > > http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TBODY
    > > <!ELEMENT TBODY O O (TR)+ -- table body -->

    >
    > What is "TBODY" actually. Is it like TABLE?


    No, it's the body of the table.
    THEAD is the header.
    TFOOT is the footer.

    >
    > OK thanks. I've got a place to start looking now.


    Actually, you should really learn a bit more about html first. You need to
    know what valid elements are and where to put them before you start creating
    new ones. :)

    A good place for you to start is to ask for good tutorials over in
    comp.infosystems.www.authoring.html. Do read their FAQ first. They're kinda
    picky about that over there.

    And learn about doctypes while you're there.

    For your perusal, here's a simple version that works and is valid html. Note
    that form elements outside a form will not submit (your button), but since
    this is just for grins, it's okay. Also note that a production version would
    test for objects and methods before using them.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head>
    <title>TEST</title>
    <script type="text/javascript">
    function addRow() {
    var tbody = document.getElementById("t1");
    var newTr = document.createElement("TR");
    var newTd = document.createElement("TD");
    var newTxt = document.createTextNode("new row!");
    newTd.appendChild(newTxt);
    newTr.appendChild(newTd);
    tbody.appendChild(newTr);
    }
    </script>
    </head>

    <body>
    <table border="1">
    <tbody id="t1">
    <tr>
    <td>
    first row
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" value="click me"
    onclick="addRow()" >
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    --
    --
    ~kaeli~
    Acupuncture is a jab well done.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 27, 2004
    #4
  5. Re: OT: proper HTML (was Re: create a new row in a table)

    On Mon, 27 Sep 2004 14:02:42 -0500, kaeli <>
    wrote:

    [snip]

    > TABLE
    > -THEAD
    > -TBODY
    > -TR
    > -TD
    > -anything you want, including DIVS
    > -TFOOT


    That isn't quite correct. If a table contains a TFOOT element, it must
    appear before the first TBODY. This is so that in the case of a large
    table, the footer can be rendered before all of the table body data has
    been received. It would also be wise to mention that if a THEAD or TFOOT
    element is present, the table must contain at least one explicitly
    included TBODY.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 27, 2004
    #5
  6. Peter Kirk

    mark4asp Guest

    On 27 Sep 2004 19:35:35 +0200, "Peter" <peter@ciber> wrote:

    >Hi, thanks for the response...
    >
    >"kaeli" <> skrev i en meddelelse
    >news:...
    >> In article <4157cf8c$>, "Peter Kirk" <peter> enlightened

    >us
    >> > can someone please help me with creating dynamic content in a table? For
    >> > example, see the below javascript and html - why is a new row not

    >created in
    >> > the table when I click the button? (I am using Internet Explorer 6).
    >> >

    >>
    >> Invalid HTML.
    >>
    >> This is a horrible way to make dynamic tables, too.

    >
    >Quite likely.... I know zip about javascript, and almost zip about html....
    >
    >> > </tr>
    >> >
    >> > <div id="my_div"></div>

    >>
    >> A div is not allowed to be the child of TBODY.

    >
    >OK - that's what you mean by it being invalid - a DIV is not allowed inside
    >a TABLE? Don't really know what a "DIV" is, just thought it was a way to
    >create a label you could reference from other places in the html.


    In general I think you're better off using SPAN as a container but I
    don't even think you can do that inside a table. You wouldn't want to
    stick things between table, tbody, tr, td tags - it confuses the DOM -
    a TBODY's natural 'child' is a TR.

    If you want to have several TRs together you can put them in TBODYs.

    kaeli's advice looks good.

    >> TBODY has only TR as a child.
    >> http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TBODY
    >> <!ELEMENT TBODY O O (TR)+ -- table body -->

    >
    >What is "TBODY" actually. Is it like TABLE?


    It's a group of TRs. You can have several TBODYs inside a TABLE. Very
    useful when you want to show, hide, create, remove bits of a TABLE,
    but don't want to do this by having these bits as separate TABLEs
    because you need to keep the column widths the same for nice tidy,
    rendering.

    >> > <tr>
    >> > <td>
    >> > <input type="button" value="click me"
    >> > onclick="javascript:addField()" >

    >>
    >> onClick is already script. Drop the "javascript:" stuff from it.
    >> onClick="addField()"
    >>
    >> To make dynamic table rows, use createElement and appendChild.
    >> Create the element, then append it to TBODY. Or use of the insert methods

    >or
    >> replace if you'd prefer that.

    >
    >OK thanks. I've got a place to start looking now.
    >
     
    mark4asp, Sep 28, 2004
    #6
  7. Peter Kirk

    kaeli Guest

    Re: OT: proper HTML (was Re: create a new row in a table)

    In article <opsez6hwiix13kvk@atlantis>, d
    enlightened us with...
    > On Mon, 27 Sep 2004 14:02:42 -0500, kaeli <>
    > wrote:
    >
    > [snip]
    >
    > > TABLE
    > > -THEAD
    > > -TBODY
    > > -TR
    > > -TD
    > > -anything you want, including DIVS
    > > -TFOOT

    >
    > That isn't quite correct. If a table contains a TFOOT element, it must
    > appear before the first TBODY.


    Please clarify "must".

    I have used tfoot and placed it after the tbody with no problems in my
    intranet code. Meaning that the table rendered as desired and expected in NN7
    and IE6.
    Will it fail on some browsers?
    Will it not validate with W3C?

    TIA
    --
    --
    ~kaeli~
    Going to church doesn't make you a Christian any more than
    standing in a garage makes you a car.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 29, 2004
    #7
  8. Re: OT: proper HTML

    kaeli <> writes:

    >> That isn't quite correct. If a table contains a TFOOT element, it must
    >> appear before the first TBODY.

    >
    > Please clarify "must".


    ....

    > Will it fail on some browsers?


    Who knows, considering ...

    > Will it not validate with W3C?


    It won't. It's not valid HTML.

    From
    <URL:http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE>
    "<!ELEMENT TABLE - -
    (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>"
    and
    "TFOOT must appear before TBODY within a TABLE definition"

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Sep 29, 2004
    #8
  9. Re: OT: proper HTML (was Re: create a new row in a table)

    On Wed, 29 Sep 2004 09:02:19 -0500, kaeli <>
    wrote:

    > In article <opsez6hwiix13kvk@atlantis>, d
    > enlightened us with...


    [snip]

    >> If a table contains a TFOOT element, it must appear before the first
    >> TBODY.

    >
    > Please clarify "must".


    From section 11.2.3 - Row groups: the THEAD, TFOOT, and TBODY elements:

    "This example illustrates the order and structure of table heads,
    feet, and bodies.

    <TABLE>
    <THEAD>
    <TR> ...header information...
    </THEAD>
    <TFOOT>
    <TR> ...footer information...
    </TFOOT>
    <TBODY>
    <TR> ...first row of block one data...
    <TR> ...second row of block one data...
    </TBODY>
    <TBODY>
    <TR> ...first row of block two data...
    <TR> ...second row of block two data...
    <TR> ...third row of block two data...
    </TBODY>
    </TABLE>

    TFOOT must appear before TBODY within a TABLE definition so that
    user agents can render the foot before receiving all of the
    (potentially numerous) rows of data."

    > I have used tfoot and placed it after the tbody with no problems in my
    > intranet code. Meaning that the table rendered as desired and expected
    > in NN7 and IE6.
    > Will it fail on some browsers?


    Probably not. You've no doubt seen as much tag soup as I have, yet
    browsers still do something meaningful with it. The browser will probably
    just error-correct the tree to include the TFOOT element before any TBODY
    elements.

    > Will it not validate with W3C?


    No, it will not. The validator requires the order in the example above.

    Upon reflection, I think the only significance to the order was what I
    said in my last post: the footer should come first so the browser can
    render it before the body. However, I doubt many attempt to do so.
    Nevertheless, the mark-up is invalid. I don't think such a simple
    correction should require any kind of justification.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 29, 2004
    #9
  10. Peter Kirk

    kaeli Guest

    Re: OT: proper HTML (was Re: create a new row in a table)

    In article <opse3jv4gcx13kvk@atlantis>, d
    enlightened us with...
    >
    > TFOOT must appear before TBODY within a TABLE definition so that
    > user agents can render the foot before receiving all of the
    > (potentially numerous) rows of data."
    >


    Ah, okey dokey.

    > Nevertheless, the mark-up is invalid. I don't think such a simple
    > correction should require any kind of justification.
    >


    It does to me.
    I like to know why I'm doing something as illogical as writing a footer at
    the top of a table before body content. ;)
    YMMV.


    --
    --
    ~kaeli~
    A lot of money is tainted - It taint yours and it taint mine.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 29, 2004
    #10
  11. Peter Kirk

    Grant Wagner Guest

    Re: OT: proper HTML (was Re: create a new row in a table)

    Michael Winter wrote:

    > > I have used tfoot and placed it after the tbody with no problems in my
    > > intranet code. Meaning that the table rendered as desired and expected
    > > in NN7 and IE6.
    > > Will it fail on some browsers?

    >
    > Probably not. You've no doubt seen as much tag soup as I have, yet
    > browsers still do something meaningful with it. The browser will probably
    > just error-correct the tree to include the TFOOT element before any TBODY
    > elements.


    The problem is that:

    <table>
    <thead>
    <tr><td>Head</td></tr>
    </thead>
    <tfoot>
    <tr><td>Foot</td></tr>
    </tfoot>
    <tbody>
    <tr><td>Body</td></tr>
    </tbody>
    </table>

    Renders on Netscape 4.78 as:

    Head
    Foot
    Body


    > Upon reflection, I think the only significance to the order was what I
    > said in my last post: the footer should come first so the browser can
    > render it before the body. However, I doubt many attempt to do so.
    > Nevertheless, the mark-up is invalid. I don't think such a simple
    > correction should require any kind of justification.


    Given that most modern user agents will, as you say, correct the incorrect
    THEAD, TBODY, TFOOT layout, but Netscape 4.78 (and potentially other less
    capable user agents on portable devices) may render THEAD, TFOOT, TBODY
    incorrectly, it seems prudent at this point in HTML authoring to either omit
    these elements entirely, or place them in what at first blush would appear to
    be their logical order (or use TBODY for everything and control any CSS
    issues using classes).

    For example:

    tfoot td {font-weight:bold;}

    might become:

    tbody.reallyTfoot td {font-weight:bold;}

    Now, admittedly Netscape 4.78 won't honor either of these, but having the
    cells in the tfoot appear bold isn't nearly as important as having the cells
    in the tfoot appear at the bottom of the table.

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Sep 29, 2004
    #11
    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. =?Utf-8?B?U3VyZXNo?=
    Replies:
    1
    Views:
    475
    Saravana
    Nov 22, 2004
  2. Anon
    Replies:
    2
    Views:
    949
    Jukka K. Korpela
    Mar 18, 2005
  3. phl
    Replies:
    1
    Views:
    4,377
    Martin Jay
    Jun 8, 2006
  4. D
    Replies:
    0
    Views:
    230
  5. Giggle Girl

    ie6 Insert Row at specific Row Index of Table

    Giggle Girl, Feb 5, 2006, in forum: Javascript
    Replies:
    18
    Views:
    297
    Thomas 'PointedEars' Lahn
    Feb 7, 2006
Loading...

Share This Page