adding rows to a table

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

  1. 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
     
    benkasminbullock, Oct 26, 2007
    #1
    1. Advertisements

  2. benkasminbullock

    RobG Guest

    <FAQENTRY>

    Here it is again... :)

    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
     
    RobG, Oct 26, 2007
    #2
    1. Advertisements

  3. 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.
     
    benkasminbullock, Oct 26, 2007
    #3
  4. benkasminbullock

    SAM Guest

    SAM, Oct 27, 2007
    #4
  5. benkasminbullock

    SAM Guest

    a écrit :
    With the above example my Firefox add no space ...
    (or it is very very very small ?)
     
    SAM, Oct 27, 2007
    #5
  6. benkasminbullock

    RobG Guest

    It is OK in IE. :)
     
    RobG, Oct 28, 2007
    #6
  7. benkasminbullock

    RobG Guest

     
    RobG, Oct 28, 2007
    #7
  8. benkasminbullock

    RobG Guest

    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.

    I can't comment about the whitespace, nothing you've posted indicates
    that it should occur.
     
    RobG, Oct 29, 2007
    #8
  9. 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.
     
    benkasminbullock, Oct 31, 2007
    #9
  10. 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.
     
    benkasminbullock, Oct 31, 2007
    #10
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.