ie6 Insert Row at specific Row Index of Table

Discussion in 'Javascript' started by Giggle Girl, Feb 5, 2006.

  1. Giggle Girl

    Giggle Girl Guest

    Can someone show me how to insert a row at any given row index of an
    already created table? It only has to work in IE6 (used on intranet at
    work).

    Specifically, if a table is 20 rows in total (thought his will vary),
    and someone wants to insert a new row at row 5, i need for one row to
    be added, and each of the rows from 5-20 to be "cloned" to 6-21.

    The contents of row 5 may vary as well; it is not a straight copy of an
    exisiting row.

    I have seen something that did this very thing, but it used innerHTML,
    and I have read this is inavisable for tables.

    Thanks,
    Ann
     
    Giggle Girl, Feb 5, 2006
    #1
    1. Advertising

  2. Ian Collins wrote:

    > Giggle Girl wrote:
    >> Can someone show me how to insert a row at any given row index of an
    >> already created table? It only has to work in IE6 (used on intranet at
    >> work).
    >>
    >> Specifically, if a table is 20 rows in total (thought his will vary),
    >> and someone wants to insert a new row at row 5, i need for one row to
    >> be added, and each of the rows from 5-20 to be "cloned" to 6-21.
    >>

    > Locate the table element in the DOM and use insertRow( index ) to insert
    > the row.


    And be sure that you insert it as child element of a `thead' or `tbody'
    element.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Feb 5, 2006
    #2
    1. Advertising

  3. Ian Collins wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >>>> Specifically, if a table is 20 rows in total (thought his will vary),
    >>>> and someone wants to insert a new row at row 5, i need for one row to
    >>>> be added, and each of the rows from 5-20 to be "cloned" to 6-21.
    >>> Locate the table element in the DOM and use insertRow( index ) to insert
    >>> the row.

    >> And be sure that you insert it as child element of a `thead' or `tbody'
    >> element.

    >
    > Unnecessary and I think plain wrong, insertRow is an HTMLTableElement
    > method and it adds a tbody if the table is empty.


    I remember to have read here that the latter does not happen in all DOMs,
    especially I remember to have read here that it does not happen in the IE
    DOM. Maybe I remember incorrectly.

    > Otherwise it will add to the table section corresponding to the index.
    >
    > Try this:
    >
    > HTML:
    >
    > <table id='test1'>
    > </table>


    This is not Valid (X)HTML. The `table' element requires at least the
    `tbody' element in HTML, and although its start and end tags are optional
    in HTML, its content model requires the `tr' element. In XHTML, the
    content model of the `table' element requires at least one `tbody' or
    one `tr' element.

    > <table id='test2'>
    > <tbody>
    > <tr>
    > <td name='cell0'/>


    This is not Valid (X)HTML, `td' elements do not have a `name' attribute.
    The SHORTTAG syntax used is equivalent to

    <td name='cell0'>&gt;</td>

    in HTML, and not recommended for XHTML per XML (as the `td' element is
    not declared EMPTY there).

    > <tr>
    > <tr>


    This is not Valid (X)HTML, the `tr' element's content model requires the
    `th' or `td' element. In XHTML, the close tag is not optional.

    > <td name='cell1'/>
    > <tr>


    See above.

    > <tbody>
    > </table>
    >
    > Script:
    >
    > var test1 = document.getElementById('test1');
    > test1.insertRow(-1);


    These lack the previous feature test.
    <URL:http://pointedears.de/scripts/test/whatami>
    <URL:http://www.jibbering.com/faq/faq_notes/not_browser_detect.html>

    > alert(test1.innerHTML);

    ^^^^^^^^^^
    This is even more proprietary.

    > var test2 = document.getElementById('test2');
    > var row = test2.insertRow(1);
    > var cell = row.insertCell(-1);
    > cell.name = 'cell2';
    > alert(test2.innerHTML);


    An (X)HTML `td' element does not have a `name' attribute, and so
    an HTMLTableCellElement object does not have a `name' property.
    As DOM element objects are exposed as host objects to the script
    engine, this has potential to break the script.

    See above for the rest.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Feb 5, 2006
    #3
  4. Giggle Girl

    Giggle Girl Guest


    > Locate the table element in the DOM and use insertRow( index ) to insert
    > the row.


    And doing so will automatically "bump" all rows thereafter? (No need
    for me to manually do it?)

    If that is the case, awesome! If not, do you have some code I can see
    that does it?

    Thanks so much,
    Ann
     
    Giggle Girl, Feb 5, 2006
    #4
  5. Giggle Girl

    RobG Guest

    Thomas 'PointedEars' Lahn wrote:
    > Ian Collins wrote:
    >
    >
    >>Thomas 'PointedEars' Lahn wrote:
    >>
    >>>>>Specifically, if a table is 20 rows in total (thought his will vary),
    >>>>>and someone wants to insert a new row at row 5, i need for one row to
    >>>>>be added, and each of the rows from 5-20 to be "cloned" to 6-21.
    >>>>
    >>>>Locate the table element in the DOM and use insertRow( index ) to insert
    >>>>the row.
    >>>
    >>>And be sure that you insert it as child element of a `thead' or `tbody'
    >>>element.

    >>
    >>Unnecessary and I think plain wrong, insertRow is an HTMLTableElement
    >>method and it adds a tbody if the table is empty.

    >
    >
    > I remember to have read here that the latter does not happen in all DOMs,
    > especially I remember to have read here that it does not happen in the IE
    > DOM. Maybe I remember incorrectly.


    If adding rows using document.createElement() and appendChild(), some
    browsers (e.g. IE) require that you append it to a tbody element - other
    browsers (e.g. Gecko & KHTML based browsers) let you append it to the table.

    However, insertRow() is a method of the HTMLTableSectionElement. The
    new row is created as a child of the table element, a append separate
    append is not required.

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

    [...]

    --
    Rob
     
    RobG, Feb 5, 2006
    #5
  6. Giggle Girl

    VK Guest

    RobG wrote:
    > If adding rows using document.createElement() and appendChild(), some
    > browsers (e.g. IE) require that you append it to a tbody element - other
    > browsers (e.g. Gecko & KHTML based browsers) let you append it to the table.


    Not totally right.
    IE automatically creates at least one tbody element during the initial
    page parsing. So either you added <tbody> tag or not you still have
    tBody section and appendChild will add rows to there.
    At the same time <thead> and <tfoot> elements are not created
    automatically, so in order to insert rows to tHead or tFoot you have to
    mark up your table in advance (or create header and footer
    pragrammatically)

    Other browsers do not create tBody automatically. On attempt to insert
    a row to a table without <tbody> section three outcomes are possible:
    1) the operation will fail
    2) new row is added as direct child of table
    3) on the first attempt to insert a row tBody section is created and
    new row is added as a child if it (namely emulation of IE behavior).

    While the 3rd one is currently the winning one, but all three outcomes
    are still possible between different *rather modern* browsers and
    versions.

    This is why I'd like to repeat: if one plans to script a table, always
    markup <thead>, <tfoot> and <tbody> manyally, do not trust the parser.

    If you do not plan to script the table (add/remove/sort rows) then
    <thead>, <tfoot> and <tbody> can be securely omited.
     
    VK, Feb 6, 2006
    #6
  7. Giggle Girl

    RobG Guest

    VK wrote:
    > RobG wrote:
    >
    >>If adding rows using document.createElement() and appendChild(), some
    >>browsers (e.g. IE) require that you append it to a tbody element - other
    >>browsers (e.g. Gecko & KHTML based browsers) let you append it to the table.

    >
    >
    > Not totally right.


    The language was not perfect, but it is correct. In IE you must append a
    row created with createElement to a tbody (or thead or tfoot) element. In
    other browsers, you can add it to the table - where it will be appended as
    the last child of the first tbody element.


    > IE automatically creates at least one tbody element during the initial
    > page parsing. So either you added <tbody> tag or not you still have
    > tBody section and appendChild will add rows to there.


    Which is the correct behaviour for any standards compliant browser. A
    tbody element is mandatory, the tags aren't.


    > At the same time <thead> and <tfoot> elements are not created
    > automatically, so in order to insert rows to tHead or tFoot you have to
    > mark up your table in advance (or create header and footer
    > pragrammatically)


    Of course. thead and tfoot elements only exist if you put them in the
    markup or create them using script. Otherwise they won't exist.


    >
    > Other browsers do not create tBody automatically.


    Which ones? If they don't, they aren't compliant with HTML 4.


    > On attempt to insert
    > a row to a table without <tbody> section three outcomes are possible:
    > 1) the operation will fail


    If the browser supports insertRow (which was part of DOM 1 in 1998), then
    it should not fail. If it's not supported, feature testing should detect
    that and some other solution should be attempted.


    > 2) new row is added as direct child of table


    In which browser? Any I've tested *always* create a tbody even if the tags
    aren't coded in the HTML source, as per the HTML 4 specification.


    > 3) on the first attempt to insert a row tBody section is created and
    > new row is added as a child if it (namely emulation of IE behavior).


    Rubbish. The tbody is created when the HTML source for the table is
    parsed, whether the tags are there or not because that is what the HTML 4
    spec says should happen. It is not created as a result of using insertRow.

    That IE has the same behaviour as other browsers doesn't mean they are
    emulating IE, it just means IE follows the spec.

    head and body tags are optional but the elements aren't, is that an
    emulation of IE too?


    > While the 3rd one is currently the winning one, but all three outcomes
    > are still possible between different *rather modern* browsers and
    > versions.


    Please state any modern browser that does either 1 or 2.


    >
    > This is why I'd like to repeat: if one plans to script a table, always
    > markup <thead>, <tfoot> and <tbody> manyally, do not trust the parser.


    That is not good advice. thead and tfoot are only required if you actually
    use them, they aren't allowed to be empty so if you don't have any need for
    them, don't code them. tbody *tags* are not mandatory, read the spec.


    > If you do not plan to script the table (add/remove/sort rows) then
    > <thead>, <tfoot> and <tbody> can be securely omited.


    They can be securely omitted anyway.



    --
    Rob
     
    RobG, Feb 6, 2006
    #7
  8. Ian Collins wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >>>> And be sure that you insert it as child element of a `thead' or `tbody'
    >>>> element.
    >>> Unnecessary and I think plain wrong, insertRow is an HTMLTableElement
    >>> method and it adds a tbody if the table is empty.

    >> I remember to have read here that the latter does not happen in all DOMs,
    >> especially I remember to have read here that it does not happen in the IE
    >> DOM. Maybe I remember incorrectly.

    >
    > If you'd tried the mickey mouse example (rather than pulling it apart)
    > you would have seen that it does work in IE (the OP's requirement).


    I do not have IE here, and it remains to be seen if it works in _all_ IE
    versions on all possible platforms (the OP's requirement was IE_6_ only).

    >>> <table id='test1'>
    >>> </table>

    >> This is not Valid (X)HTML. The `table' element requires at least the
    >> `tbody' element in HTML, and although its start and end tags are optional
    >> in HTML, its content model requires the `tr' element. In XHTML, the
    >> content model of the `table' element requires at least one `tbody' or
    >> one `tr' element.

    >
    > I don't care, it was a quick demo. The web is full of such
    > non-conforming code and browsers cope with it. If you try it, you will
    > see than IE automatically inserts the tbody.


    Scripting, especially DOM scripting, operating from within and on not Valid
    markup has been proven to be inherently unreliable. Examples/demos should
    be Valid or they are next to useless.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Feb 6, 2006
    #8
  9. Gérard Talbot, Feb 6, 2006
    #9
  10. Thomas 'PointedEars' Lahn wrote :
    > Ian Collins wrote:
    >


    >>
    >> HTML:
    >>
    >> <table id='test1'>
    >> </table>

    >
    > This is not Valid (X)HTML. The `table' element requires at least the
    > `tbody' element in HTML, and although its start and end tags are optional
    > in HTML, its content model requires the `tr' element. In XHTML, the
    > content model of the `table' element requires at least one `tbody' or
    > one `tr' element.
    >
    >> <table id='test2'>
    >> <tbody>
    >> <tr>
    >> <td name='cell0'/>

    >
    > This is not Valid (X)HTML, `td' elements do not have a `name' attribute.
    > The SHORTTAG syntax used is equivalent to
    >
    > <td name='cell0'>&gt;</td>
    >
    > in HTML, and not recommended for XHTML per XML (as the `td' element is
    > not declared EMPTY there).
    >
    >> <tr>
    >> <tr>

    >
    > This is not Valid (X)HTML, the `tr' element's content model requires the
    > `th' or `td' element. In XHTML, the close tag is not optional.
    >
    >> <td name='cell1'/>
    >> <tr>

    >
    > See above.
    >
    >> <tbody>
    >> </table>
    >>
    >> Script:
    >>
    >> var test1 = document.getElementById('test1');
    >> test1.insertRow(-1);

    >
    > These lack the previous feature test.
    > <URL:http://pointedears.de/scripts/test/whatami>


    The page at the above url has validation errors. Isn't strange to see
    people like 'PointedEars' telling others about valid webpage when most
    of his own website pages fail to pass validation and they don't even use
    a strict DTD.

    When someone like Thomas 'PointedEars' Lahn has well above 500
    validation markup errors on his site, then he should fix these instead
    of lecturing others about valid HTML.

    Gérard
    --
    remove blah to email me
     
    Gérard Talbot, Feb 6, 2006
    #10
  11. Giggle Girl

    Giggle Girl Guest

    Ok, I have successfull used insertRow to put a row into my table.
    Trouble is, I don't know how to put cell content there! Can someone
    show me working code that inserts a row that looks like this:

    <tr id="tree_row_3">
    <td width="20" height="20">&nbsp;</td>
    <td width="20" height="20"><img src="../images/icon_join.gif"
    width="19" height="16" /></td>
    <td width="20" height="20"><img src="../images/icon_ok.gif"
    width="16" height="16" /></td>
    <td colspan="7">Three</td>
    </tr>

    Thanks so much!

    Ann
    PS: I have spent an hour googling "HTMLTableElement insertRow" and can
    find only the theory behind it, not working examples...
     
    Giggle Girl, Feb 6, 2006
    #11
  12. Giggle Girl wrote :
    > Ok, I have successfull used insertRow to put a row into my table.
    > Trouble is, I don't know how to put cell content there! Can someone
    > show me working code that inserts a row that looks like this:
    >
    > <tr id="tree_row_3">
    > <td width="20" height="20">&nbsp;</td>
    > <td width="20" height="20"><img src="../images/icon_join.gif"
    > width="19" height="16" /></td>
    > <td width="20" height="20"><img src="../images/icon_ok.gif"
    > width="16" height="16" /></td>
    > <td colspan="7">Three</td>
    > </tr>
    >
    > Thanks so much!
    >
    > Ann
    > PS: I have spent an hour googling "HTMLTableElement insertRow" and can
    > find only the theory behind it, not working examples...
    >


    Study this example:
    Dynamically creating, populating and inserting a table
    http://www.gtalbot.org/DHTMLSection/CreatingTable.html

    Please don't forget to read my copyright notice.
    http://www.gtalbot.org/Varia/CopyrightNotice.html

    Gérard
    --
    remove blah to email me
     
    Gérard Talbot, Feb 6, 2006
    #12
  13. Giggle Girl

    RobG Guest

    Ian Collins wrote:
    > RobG wrote:
    >
    >>
    >>> 3) on the first attempt to insert a row tBody section is created and
    >>> new row is added as a child if it (namely emulation of IE behavior).

    >>
    >>
    >>
    >> Rubbish. The tbody is created when the HTML source for the table is
    >> parsed, whether the tags are there or not because that is what the
    >> HTML 4 spec says should happen. It is not created as a result of
    >> using insertRow.
    >>

    > Not rubbish, it depends on the context. If you are building a table in
    > script, the tbody will be added when you add the first row, try:


    The bit that is rubbish is the phrase 'emulation of IE behavior' - it is
    conforming to the W3 DOM 2 specification.

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


    Your point is valid, but the discussion wasn't about building a table
    with script, it was about inserting a new row into an existing table and
    in that context the tbody already exists.

    It is also interesting to compare the behaviour of different browsers
    when adding a row using the HTMLTableElement::insertRow method and the
    Node::appendChild method.

    insertRow is 'safer' as in conforming browsers it automatically handles
    the tbody issue. When adding rows with appendChild, not all browsers
    will handle adding the row to a table (e.g. IE), they require the row to
    be explicitly added to a tbody (or other table section). appendChild
    might be more widely supported and is a reasonable first fallback.

    If you have a table with more than one section (say with a thead, tfoot
    or multiple tbodys) then you should get a reference to the correct table
    section anyway to add the row - otherwise insertRow will just add the
    row to the last tbody element.

    [...]


    --
    Rob
     
    RobG, Feb 7, 2006
    #13
  14. Giggle Girl

    RobG Guest

    RobG, Feb 7, 2006
    #14
  15. RobG wrote :
    > Gérard Talbot wrote:
    >> Ian Collins wrote :
    >>
    >>> which browsers don't work as expected?

    >>
    >>
    >> InsertRow() is not working accordingly
    >> http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/InsertRowNotWorking.html

    >
    >
    > If you add the tbody to the table *before* using insertRow, it works
    > fine (or add the rows to the table instead...).


    Yep. It works. Amazing.

    I still think MSIE 6 and MSIE 7 beta 2 are buggy on this though.

    Gérard
    --
    remove blah to email me
     
    Gérard Talbot, Feb 7, 2006
    #15
  16. Ian Collins wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> Scripting, especially DOM scripting, operating from within and on not
    >> Valid markup has been proven to be inherently unreliable. Examples/demos
    >> should be Valid or they are next to useless.

    >
    > How can I show IE adding the missing element if I include it in the
    > markup?


    For example by counting the rows of the table afterwards.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Feb 7, 2006
    #16
  17. Ian Collins wrote:

    > RobG wrote:
    >> If you have a table with more than one section (say with a thead, tfoot
    >> or multiple tbodys) then you should get a reference to the correct table
    >> section anyway to add the row - otherwise insertRow will just add the
    >> row to the last tbody element.

    >
    > Doesn't it (insertRow) add the row to the section containing the
    > previous row?


    At least it is specified so.

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


    PointedEars
     
    Thomas 'PointedEars' Lahn, Feb 7, 2006
    #17
  18. Giggle Girl

    RobG Guest

    Ian Collins wrote:
    > RobG wrote:

    [...]
    >
    >> If you have a table with more than one section (say with a thead,
    >> tfoot or multiple tbodys) then you should get a reference to the
    >> correct table section anyway to add the row - otherwise insertRow will
    >> just add the row to the last tbody element.
    >>

    > Doesn't it (insertRow) add the row to the section containing the
    > previous row?


    I think you mean at the nominated table row index - so yes. I was
    playing with -1 so it always went at the end.

    The TR's rowIndex property is in respect to the table as a whole, but
    when inserting in a section (e.g. objTbody.insertRow(i)), the index is
    in relation to the section.



    --
    Rob
     
    RobG, Feb 7, 2006
    #18
  19. Ian Collins wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> Ian Collins wrote:
    >>> Thomas 'PointedEars' Lahn wrote:
    >>>> Scripting, especially DOM scripting, operating from within and on not
    >>>> Valid markup has been proven to be inherently unreliable.
    >>>> Examples/demos should be Valid or they are next to useless.
    >>> How can I show IE adding the missing element if I include it in the
    >>> markup?

    >> For example by counting the rows of the table afterwards.
    >>

    > Not a lot of use when the missing element is a tbody....


    Actually, the `tbody' element is never missing if there is a `table'
    element. It is its tags that are missing since they are both optional,
    and, depending on the DOM, the respective element object in the document
    tree that is therefore missing.

    To detect if this object was included in the document tree only because
    of calling insertRow() or another table-related DOM method, it would be
    sufficient to call getElementsByTagName("tbody") for the HTMLTableElement
    object before and after calling the DOM method, and examining its
    properties (`length', for example).


    PointedEars
     
    Thomas 'PointedEars' Lahn, Feb 7, 2006
    #19
    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. Ivor O'Connor
    Replies:
    4
    Views:
    939
    Isofarro
    Nov 25, 2003
  2. Peter Mount
    Replies:
    4
    Views:
    1,003
    Peter Mount
    Jan 31, 2006
  3. phl
    Replies:
    1
    Views:
    4,438
    Martin Jay
    Jun 8, 2006
  4. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    359
    Tomasz Chmielewski
    Mar 4, 2008
  5. Replies:
    3
    Views:
    191
Loading...

Share This Page