Dynamic DOM table creation, Mac Internet Explorer 5.2

Discussion in 'Javascript' started by The_Original_MB, Jan 28, 2005.

  1. I have a task to create tables dynamically, using the javascript DOM.
    The current method uses a 1px x 1px IFRAME to loop through some data
    generation stuff, and then call JS functions in the parent window to
    generate the tables.

    The basic idea is to add a table tag, with a thead and tbody, on the
    main parent page, that has display:none set. This then becomes
    display:block when there are rows to show. The rows themselves are
    added directly to the visible tbody element using appendChild(). When
    the results need to be refreshed, the tbody elements are removed, and
    then added again.

    This works well in most browsers, including Opera. However, Mac IE
    always freezes when trying to generate the table, even for the first
    time.

    I have several different versions, and they all generate the same
    issue. The tables I am creating are quite complex: multiple cells,
    colspans, images, nested tables, roll over colours, styles etc. At
    first, I believed it was an issue with creating images dynamically,
    however it now seems that is not the case.

    I have also tried creating the table and tbody tags using the DOM and
    appending them to a div, but with no luck. I have also tried creating
    the tables using a hidden object and then copying the innerHTML / nodes
    across to the visible one. The various versions I have cover most
    bases:

    * using innerHTML to add content to the cells
    * using the javascript DOM to create all elements and append them
    * using a mixture of the both

    If anybody has any feedback or suggestions then it would be really
    appreciated, particularly related to the following:

    * From your experience, is this realistically possible?

    * Is the problem I'm experiencing related to the complexity or size
    of the table I am trying to generate? If the table is simple text only,
    with 2 or 3 columns and rows, then it does work.

    * What is the best method to dynamically create tables and cell
    content across browsers, and in Mac IE?

    * Is the problem image related? Does anyone have experience of
    creating images dynamically in tables in Mac IE? Do you use "new
    image()" or createElement()? (using the small table sample, this was
    possible using both methods, and also innerHTML on a cell).
    Thanks for your help,
    Matt
    The_Original_MB, Jan 28, 2005
    #1
    1. Advertising

  2. The_Original_MB

    RobG Guest

    The_Original_MB wrote:
    > I have a task to create tables dynamically, using the javascript DOM.
    > The current method uses a 1px x 1px IFRAME to loop through some data
    > generation stuff, and then call JS functions in the parent window to
    > generate the tables.


    As far as I can tell, innerHTML does not work in IE 5.2 (Mac) though
    the
    following test returns 'Yes':

    <button onclick="
    (this.innerHTML)? alert('Yes') : alert('No');
    ">test</button>

    Attempting to use even the simplest innerHTML caused IE to quit.

    Using DOM createElement had much more sucess, however it was
    impossible to make IE understand colspan and rowspan using
    something like:

    var oCell = document.createElement('td');
    oCell.setAttribute('colspan','2');

    Maybe there is a way of setting the colspan attribute other than
    setAttribute?

    As for adding images, I just use something like:

    var oImg = document.createElement('img');
    oImg.src = "a.jpg"
    oCell.appendChild(oImg);

    All my code works perfectly (well, without obvious or reported errors)
    in
    Safari and Firefox, so I guess it's an IE issue.

    Why not just use a frame, and don't build the content dynamically?

    Why not ditch IE and use Firefox or Safari? Don't tell me: still on
    OS 9?
    In that case, I guess you're stuck. OS X runs fine on a 300 MHz G3
    or better,
    so maybe it's time to upgrade?

    Slabs of play code:



    <html><head><title>Create Table</title>
    <script type="text/javascript">
    function drawTableD(place) {
    if (document.createElement) {
    var oTable = document.createElement('table');
    oTable.style.border = '1px solid red';
    var oTbody = document.createElement('tbody');
    var oRow = document.createElement('tr');

    // Put 4 cells in the a row
    for (var i=0; i<4; i++) {
    var oCell = document.createElement('td');
    var oTxt = document.createTextNode('a cell');
    oCell.style.border = '1px solid blue';
    oCell.appendChild(oTxt);
    oRow.appendChild(oCell);
    }
    oTbody.appendChild(oRow);


    // b row with a colspan
    var oRow = document.createElement('tr');

    var oCell = document.createElement('td');
    oCell.style.border = '1px solid green';
    oCell.setAttribute('colspan', '2');
    var oTxt = document.createTextNode('b Cell');
    oCell.appendChild(oTxt);
    oRow.appendChild(oCell);

    for (var i=0; i<2; i++) {
    var oCell = document.createElement('td');
    oCell.style.border = '1px solid green';
    var oTxt = document.createTextNode('b Cell');
    oCell.appendChild(oTxt);
    oRow.appendChild(oCell);
    }

    oTbody.appendChild(oRow);

    // c row with a rowspan
    var oRow = document.createElement('tr');
    var oCell = document.createElement('td');
    oCell.style.border = '1px solid purple';
    oCell.setAttribute('rowspan', '2');
    var oTxt = document.createTextNode('c Cell');
    oCell.appendChild(oTxt);
    oRow.appendChild(oCell);

    var oCell = document.createElement('td');
    oCell.style.border = '1px solid purple';
    oCell.setAttribute('colspan', '2');
    oCell.setAttribute('rowspan', '2');
    // var oTxt = document.createTextNode('c Cell');

    // Put an image in here
    var oImg = document.createElement('img');
    oImg.src = "a.jpg"
    oCell.appendChild(oImg);
    oRow.appendChild(oCell);

    var oCell = document.createElement('td');
    oCell.style.border = '1px solid purple';
    var oTxt = document.createTextNode('c Cell');
    oCell.appendChild(oTxt);
    oRow.appendChild(oCell);

    oTbody.appendChild(oRow);

    // d row
    var oRow = document.createElement('tr');
    var oCell = document.createElement('td');
    oCell.style.border = '1px solid gold';
    var oTxt = document.createTextNode('d Cell');
    oCell.appendChild(oTxt);
    oRow.appendChild(oCell);

    oTbody.appendChild(oRow);

    // Put into page
    oTable.appendChild(oTbody);
    place.appendChild(oTable);

    } else {
    alert('your browser does not support createElement');
    }

    }

    function drawTableI(place){

    if (place.innerHTML) {

    var tableHTML = [
    '<table style="border: 1px solid red">',
    '<tbody><tr>',
    '<td style="border: 1px solid blue">a cell</td>',
    '<td style="border: 1px solid blue">a cell</td>',
    '<td style="border: 1px solid blue">a cell</td>',
    '<td style="border: 1px solid blue">a cell</td>',
    '</tr><tr>',
    '<td style="border: 1px solid green"',
    ' colspan="2">b cell</td>',
    '<td style="border: 1px solid green">b cell</td>',
    '<td style="border: 1px solid green">b cell</td>',
    '</tr><tr>',
    '<td style="border: 1px solid purple"',
    ' rowspan="2">c cell</td>',
    '<td style="border: 1px solid purple"',
    ' rowspan="2" colspan="2">',
    '<img src="a.jpg" alt="aPicture">',
    '</td>',
    '<td style="border: 1px solid purple">c cell</td>',
    '</tr><tr>',
    '<td style="border: 1px solid gold">d cell</td>',
    '</tr></tbody></table>'
    ];

    // Uncomment either of the following lines that put
    // the HTML into the page and IE will die.
    alert('place is ' + place
    + '\nHTML is \n' + tableHTML.join('\n'));
    // place.innerHTML = tableHTML.join('');

    pHTML = 'just some text';
    alert(pHTML);
    // place.innerHTML = pHTML;


    } else {
    alert('innerHTML not supported');
    }

    }
    </script>
    </head><body>

    <div>
    <button onclick="drawTableD(this.parentNode);"
    >Draw Table (DOM)</button>

    </div>
    <div>
    <button onclick="drawTableI(this.parentNode);"
    >Draw Table (innerHTML)</button>

    <div>
    <button onclick="(this.innerHTML)? alert('Yes')
    : alert('No');">test</button>
    </body></html>


    --
    Rob
    RobG, Jan 29, 2005
    #2
    1. Advertising

  3. Hi Rob,

    Thanks for your reply last week. After spending more time investigating
    the problem, I've decided a few "tricks" are necessary to get Mac IE to
    generate the tables as expected.

    Mainly these are use setTimeout to create a delay after writing each
    table row and also append the rows to a table that is hidden using CSS,
    then copy it across to the visible table.

    Thanks
    Matt
    The_Original_MB, Feb 7, 2005
    #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,112
  2. kayodeok
    Replies:
    2
    Views:
    1,627
    kayodeok
    Feb 28, 2004
  3. Ed Hauptman
    Replies:
    7
    Views:
    990
    Ed Hauptman
    Aug 7, 2009
  4. Raghuram Banda
    Replies:
    3
    Views:
    99
  5. John Smith
    Replies:
    1
    Views:
    121
    Evertjan.
    Mar 12, 2005
Loading...

Share This Page