adding rows to a table

Discussion in 'Javascript' started by benkasminbullock@gmail.com, Oct 26, 2007.

  1. Guest

    I have a script which adds rows to an HTML table. However, the script
    functions only for Firefox and not for Internet Explorer. Here is a
    test case which works on Firefox 2.0.0.8 but does not work on Internet
    Explorer 6.0.

    Can anyone explain why this does not work, and is there a way to make
    it work with Internet Explorer?

    What bothers me is that modifying the script slightly to change the
    table to a <ul> and the <tr> to a <li> does work with Internet
    Explorer.

    Thanks for any help.

    %%%%%%%%%%%%%%% start of example

    <html>
    <head>
    <script>
    function add_a_row()
    {
    alert ("Add a row");
    var cell = document.createElement("td");
    cell.appendChild(document.createTextNode("Second"));
    var row = document.createElement("tr");
    row.appendChild(cell);
    var mytable = document.getElementById("mytable");
    mytable.appendChild(row);
    }
    </script>
    <style>
    table { border-style: outset; border-width: 3; }
    td { border-style: inset; border-width: 3; font-size: 50; }
    </style>
    </head>
    <body>
    <table id="mytable">
    <tr><td>First</td></tr>
    </table>
    <form>
    <input type="button"
    onclick="add_a_row()"
    value="add a row">
    </form>
    </body>
    </html>

    %%%%%%%%%%%%%%%%% end of example
     
    , Oct 26, 2007
    #1
    1. Advertising

  2. RobG Guest

    On Oct 26, 4:11 pm, ""
    <> wrote:
    > I have a script which adds rows to an HTML table. However, the script
    > functions only for Firefox and not for Internet Explorer. Here is a
    > test case which works on Firefox 2.0.0.8 but does not work on Internet
    > Explorer 6.0.


    <FAQENTRY>

    Here it is again... :)

    </FAQENTRY>

    >
    > Can anyone explain why this does not work, and is there a way to make
    > it work with Internet Explorer?


    When adding rows to a table:

    1. Don't ever user innerHTML (OK, you didn't do that)

    2. Don't append rows to the table, append them to a
    tableSection element (tbody, thead or tfoot)

    3. Consider using insertRow(-1) on the table or tableSection
    so the row is created and appended in one statement.


    <URL: http://developer.mozilla.org/en/doc...ples#Example_8:_Using_the_DOM_Table_Interface
    >



    --
    Rob
     
    RobG, Oct 26, 2007
    #2
    1. Advertising

  3. Guest

    On Oct 26, 3:33 pm, RobG <> wrote:

    > > Can anyone explain why this does not work, and is there a way to make
    > > it work with Internet Explorer?

    >
    > When adding rows to a table:
    >
    > 1. Don't ever user innerHTML (OK, you didn't do that)
    >
    > 2. Don't append rows to the table, append them to a
    > tableSection element (tbody, thead or tfoot)
    >
    > 3. Consider using insertRow(-1) on the table or tableSection
    > so the row is created and appended in one statement.
    >
    > <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...


    Thank you very much for your help.

    Incidentally it says on the web pages that only IE needs to have the
    elements added to tbody, but in fact Firefox was adding some extra
    space at the top of the table every time I recreated it which was the
    bug which drove me to test it with Internet Explorer in the first
    place. Putting the elements onto <tbody> stopped the Firefox problem.

    Thanks again.
     
    , Oct 26, 2007
    #3
  4. SAM Guest

    SAM, Oct 27, 2007
    #4
  5. SAM Guest

    a écrit :
    > On Oct 26, 3:33 pm, RobG <> wrote:
    >>
    >> <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...

    >
    > Incidentally it says on the web pages that only IE needs to have the
    > elements added to tbody, but in fact Firefox was adding some extra
    > space at the top of the table every time I recreated it


    With the above example my Firefox add no space ...
    (or it is very very very small ?)

    --
    sm
     
    SAM, Oct 27, 2007
    #5
  6. RobG Guest

    RobG, Oct 28, 2007
    #6
  7. RobG Guest

    On Oct 26, 5:07 pm, ""
    <> wrote:
    > On Oct 26, 3:33 pm, RobG <> wrote:
    >
    > > > Can anyone explain why this does not work, and is there a way to make
    > > > it work with Internet Explorer?

    >
    > > When adding rows to a table:

    >
    > > 1. Don't ever user innerHTML (OK, you didn't do that)

    >
    > > 2. Don't append rows to the table, append them to a
    > > tableSection element (tbody, thead or tfoot)

    >
    > > 3. Consider using insertRow(-1) on the table or tableSection
    > > so the row is created and appended in one statement.

    >
    > > <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...

    >
    > Thank you very much for your help.
    >
    > Incidentally it says on the web pages that only IE needs to have the
    > elements added to tbody, but in fact Firefox was adding some extra
    > space at the top of the table every time I recreated it which was the
    > bug which drove me to test it with Internet Explorer in the first
    > place. Putting the elements onto <tbody> stopped the Firefox problem.
     
    RobG, Oct 28, 2007
    #7
  8. RobG Guest

    On Oct 26, 5:07 pm, ""
    <> wrote:
    > On Oct 26, 3:33 pm, RobG <> wrote:
    >
    > > > Can anyone explain why this does not work, and is there a way to make
    > > > it work with Internet Explorer?

    >
    > > When adding rows to a table:

    >
    > > 1. Don't ever user innerHTML (OK, you didn't do that)

    >
    > > 2. Don't append rows to the table, append them to a
    > > tableSection element (tbody, thead or tfoot)

    >
    > > 3. Consider using insertRow(-1) on the table or tableSection
    > > so the row is created and appended in one statement.

    >
    > > <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...

    >
    > Thank you very much for your help.
    >
    > Incidentally it says on the web pages that only IE needs to have the
    > elements added to tbody,


    It doesn't say "only", however IE is the only browser I'm aware of
    that requires new rows added using appendChild to be appended to a
    tableSection element (e.g. tbody), other browsers I've tested are OK
    with appending to the table element. I presume that this behaviour is
    because the tbody tags are not required and hence rarely used,
    although the tbody element is mandatory. Browsers insert a tbody
    where required even if there are no tags - similarly some DOMs allow
    appending rows to the table and assume that they should be appended to
    a tbody.

    Both behaviours are OK, they are just different.


    > but in fact Firefox was adding some extra
    > space at the top of the table every time I recreated it which was the
    > bug which drove me to test it with Internet Explorer in the first
    > place. Putting the elements onto <tbody> stopped the Firefox problem.


    I can't comment about the whitespace, nothing you've posted indicates
    that it should occur.


    --
    Rob
     
    RobG, Oct 29, 2007
    #8
  9. Guest

    On Oct 29, 9:01 am, RobG <> wrote:
    > On Oct 26, 5:07 pm, ""
    >
    >
    >
    > <> wrote:
    > > On Oct 26, 3:33 pm, RobG <> wrote:

    >
    > > > > Can anyone explain why this does not work, and is there a way to make
    > > > > it work with Internet Explorer?

    >
    > > > When adding rows to a table:

    >
    > > > 1. Don't ever user innerHTML (OK, you didn't do that)

    >
    > > > 2. Don't append rows to the table, append them to a
    > > > tableSection element (tbody, thead or tfoot)

    >
    > > > 3. Consider using insertRow(-1) on the table or tableSection
    > > > so the row is created and appended in one statement.

    >
    > > > <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...

    >
    > > Thank you very much for your help.

    >
    > > Incidentally it says on the web pages that only IE needs to have the
    > > elements added to tbody,

    >
    > It doesn't say "only", however IE is the only browser I'm aware of
    > that requires new rows added using appendChild to be appended to a
    > tableSection element (e.g. tbody), other browsers I've tested are OK
    > with appending to the table element. I presume that this behaviour is
    > because the tbody tags are not required and hence rarely used,
    > although the tbody element is mandatory. Browsers insert a tbody
    > where required even if there are no tags - similarly some DOMs allow
    > appending rows to the table and assume that they should be appended to
    > a tbody.
    >
    > Both behaviours are OK, they are just different.
    >
    > > but in fact Firefox was adding some extra
    > > space at the top of the table every time I recreated it which was the
    > > bug which drove me to test it with Internet Explorer in the first
    > > place. Putting the elements onto <tbody> stopped the Firefox problem.

    >
    > I can't comment about the whitespace, nothing you've posted indicates
    > that it should occur.


    The tables in the original application (not the example I posted) have
    about eighty entries, and each time the table entries were deleted and
    recreated using the original script, which goes like this:

    function clear(obj)
    {
    while(obj.hasChildNodes()) {
    obj.removeChild(obj.lastChild);
    }
    }

    <some lines>

    clear(document.getElementById("resultsField"));

    about two or three centimetres of screen space was added to the top of
    the table. If you're really interested in this issue I'll try to make
    a script which replicates it. As I mentioned, you also need to delete
    all the rows and put them back, which is a function I didn't add to
    the example script. But the problem disappeared when I added the
    things to tbody, so it's academic as far as I'm concerned. Thanks for
    your help.
     
    , Oct 31, 2007
    #9
  10. Guest

    On Oct 28, 2:04 am, SAM <>
    wrote:
    > a écrit :
    >
    > > On Oct 26, 3:33 pm, RobG <> wrote:

    >
    > >> <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...

    >
    > > Incidentally it says on the web pages that only IE needs to have the
    > > elements added to tbody, but in fact Firefox was adding some extra
    > > space at the top of the table every time I recreated it

    >
    > With the above example my Firefox add no space ...
    > (or it is very very very small ?)


    I'm sorry to have confused you.

    This problem is only visible upon deleting the rows and then re-adding
    them. My example script doesn't do that, so the problem is not visible
    here.
     
    , Oct 31, 2007
    #10
    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. Rob Meade
    Replies:
    4
    Views:
    7,390
    Rob Meade
    Nov 25, 2003
  2. =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=

    RE: Moving/adding Rows To an ASP:Table control

    =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=, May 10, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    438
    =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=
    May 10, 2004
  3. William F. Robertson, Jr.

    Re: Moving/adding Rows To an ASP:Table control

    William F. Robertson, Jr., May 10, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    1,088
    William F. Robertson, Jr.
    May 10, 2004
  4. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,351
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  5. Rio
    Replies:
    4
    Views:
    1,250
Loading...

Share This Page