469,609 Members | 1,161 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,609 developers. It's quick & easy.

Column order reversed when adding rows to a dynamic table

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

Jan 23 '06 #1
2 4738
ds********@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
Jan 23 '06 #2
Thanks for the tip.

Jan 31 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by muzamil | last post: by
5 posts views Thread by Robert Stearns | last post: by
16 posts views Thread by Geoff Jones | last post: by
9 posts views Thread by cavassinif | last post: by
13 posts views Thread by annecarterfredi | last post: by
reply views Thread by devrayhaan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.