Column order reversed when adding rows to a dynamic table

Discussion in 'Javascript' started by dschectman, Jan 23, 2006.

  1. dschectman

    dschectman Guest

    This appears to be a feature of IE JavaScript. I am running IE 6.0
    with the latest patches from Microsoft. Are there any workarounds
    other than re-coding the source HTML to place all the non-visible
    columns at the front?

    I have a page with a dynamic table. The table has some visible columns
    and some non-visible columns. The style "hide" is .hide {
    display:none; }

    <table id="SelectedList">
    <tr class="columnheader">
    <td>Value</td>
    <td class="hide">Code</td>
    <td class="hide">Type</td>
    </tr>
    </table>

    When I add rows to this table, the order of the columns depends on
    whether the hidden columns are at the beginning or end of the row.
    Here is the resulting HTML for the table. Note how in the second case,
    the order of the last two columns is reversed even though the function
    adds them in order: column1, column2, column3.

    <TBODY>
    <TR class=columnheader>
    <TD class=hide>Code</TD>
    <TD class=hide>Type</TD>
    <TD class="">Value</TD></TR>
    <TR>
    <TD class=hide>column1</TD>
    <TD class=hide>column2</TD>
    <TD>column3</TD></TR>
    <TR>
    <TD>column1</TD>
    <TD class=hide>column3</TD>
    <TD class=hide>column2</TD></TR></TBODY>

    addItem('SelectedList');
    function addItem(gridID)
    {
    var grid = document.getElementById(gridID);

    // Test #1: first two columns hidden, las column visible
    var row1 = grid.insertRow(grid.rows.length);
    for (i=0;i<3;i++)
    {
    cell = row1.insertCell(i);

    if (i==0) cell.innerHTML = "column1"; //document.test.code.value;
    else if (i==1) cell.innerHTML = "column2";
    //document.test.categ.value;
    else cell.innerHTML = "column3"; //document.test.val.value;

    if (i!=2) cell.className = "hide";
    }

    // Test #2: first column visible, last two hidden
    var row2 = grid.insertRow(grid.rows.length);
    for (i=0;i<3;i++)
    {
    cell = row2.insertCell(i);

    if (i==0) cell.innerHTML = "column1"; //document.test.code.value;
    else if (i==1) cell.innerHTML = "column2";
    //document.test.categ.value;
    else cell.innerHTML = "column3"; //document.test.val.value;

    if (i!=0) cell.className = "hide";
    }

    //document.test.tblhtml.value = grid.innerHTML;
    alert(grid.innerHTML);
    }
     
    dschectman, Jan 23, 2006
    #1
    1. Advertisements

  2. dschectman

    RobG Guest

    Yup, same result here. You can fix two ways: add the cells in one loop,
    then hide them using a separate loop, or use createElement and add them
    that way (see below):
    The whole if..else bit can be replaced with:

    cell.appendChild(document.createTextNode("column" + (i+1)));


    Replace from here:
    to here with either the following createElement solution:

    for (var i=0; i<3; i++)
    {
    cell = document.createElement('td');
    cell.appendChild(document.createTextNode("column" + (i+1)));
    row2.appendChild(cell);
    if (i!=0) cell.className = "hide";
    }


    Or this 2 loop solution:

    for (var i=0; i<3; i++)
    {
    cell = row2.insertCell(i);
    cell.appendChild(document.createTextNode("column" + (i+1)));
    }

    for (var j=1, len=row2.length; j<len ; ++j){
    row2.cells[j].className = "hide";
    }
     
    RobG, Jan 23, 2006
    #2
    1. Advertisements

  3. dschectman

    dschectman Guest

    Thanks for the tip.
     
    dschectman, Jan 31, 2006
    #3
    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.