Re: Column order reversed when adding rows to a dynamic table

dschectman@yahoo.com wrote:
> 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.

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):

>
> <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;

The whole if..else bit can be replaced with:

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

>
> if (i!=2) cell.className = "hide";
> }
>
> // Test #2: first column visible, last two hidden
> var row2 = grid.insertRow(grid.rows.length);

Replace from here:

> 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";
> }

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";
   }

>
> //document.test.tblhtml.value = grid.innerHTML;
> alert(grid.innerHTML);
> }

-- 
Rob