Changing the innerHTML of a table row

Problems with IE

[BlobFisk]

This really has me banging my head against the wall! I have written a script that moves rows up and down (to allow for easier ordering). This script works fine in Firefox and Opera but not in IE!

In IE I am getting an extremely helpful "Unknown Runtime Error"!

In the HTML:

<tr>
<td onclick="moveRowDown(this,'tbodyID')">Move Down</td>
...
</tr>

The Script:

function moveRowDown(theCell,tbodyID) {

// Get the rowIndex of the Row in question based on clicking the cell
rowNo = theCell.parentNode.rowIndex-1;
// Get the rowIndex of the row below
rowBelow = rowNo + 1;

// Short form for the tbody element
tbody = document.getElementById(tbodyID);

// The content in the current row
currentContent = tbody.rows[rowNo].innerHTML;

// The content in the row below
newContent = tbody.rows[rowBelow].innerHTML;

// Populate the Current Row with content from row below
tbody.rows[rowNo].innerHTML = newContent;

// Populate Below Row with content from row
tbody.rows[rowBelow].innerHTML = currentContent;

}

All help greatly appreciated. I really hope that I don't have to go down the route of deleting and creating new rows to do this....

(For the sake of clarity I have removed the part of the script that allows us to send the order to the backend!)

[orion_rus]

I advice you to change it like this
You don't need to call to a tbodyId in a function
and you function should seems like so:

function moveRowDown(theCell) {
theTable=theCell.parentNode.parentNode;
for (i=0;i<theTable.childNodes.length;i++)
{if (theCell==theTable.childNodes[i]) 
  {j=i;}
}
if ((j+1)<theTable.childNodes.length)
{
rowBelow =theTable.childNodes[j];
currentContent = theCell.innerHTML;
newContent = rowBelow.innerHTML;
theCell.innerHTML = newContent;
rowBelow.innerHTML=currentContent;
}
}

I think it should working
Good lukc to you

[orion_rus]

forgot(
change this
rowBelow =theTable.childNodes[j].childNodes[0];
0 - if your td is a 1 td in a tr

[orion_rus]

also )
rowBelow =theTable.childNodes[j].childNodes[0];
the same way)

[BlobFisk]

Hi onion_rus,

Thanks a million for that... unfortunately it still didn't work for me! :( Although I didn't look too hard at it (tempus fugit!). I moved to using arrays (not graceful but times at a premium here and it works):

function moveRowDown(theCell,tbodyID) {

rowNo = theCell.parentNode.rowIndex-1;
rowBelow = rowNo + 1;
tbody = document.getElementById(tbodyID);

currentRowCells = tbody.rows[rowNo].cells;
currentCellContent = new Array();
for(i=0;i<currentRowCells.length;i++) {
currentCellContent[i] = currentRowCells[i].innerHTML;
}

belowRowCells = tbody.rows[rowBelow].cells;
belowCellContent = new Array();
for(i=0;i<currentRowCells.length;i++) {
belowCellContent[i] = belowRowCells[i].innerHTML;
}

for(i=0;i<currentRowCells.length;i++) {
tbody.rows[rowNo].cells[i].innerHTML = belowCellContent[i];
tbody.rows[rowBelow].cells[i].innerHTML = currentCellContent[i];
}

}

[edited by: BlobFisk at 6:26 pm (utc) on Mar. 8, 2005]

[orion_rus]

you are welcome)

[Bernard Marx]

IE really doesn't like manipulation of a table structure via innerHTML (I think this is somewhere in the documentation). There is a non-standard moveRow method however:

[msdn.microsoft.com...]

Seeing as you're happy with what you have, I haven't tested further, but I guess that using either <table>.insertRow(i) and/or <table>.insertBefore(<row>) might well do the trick more easily.

(It's occasionally forgotten that methods like appendChild can not only be used to insert an element into the doc, but also to move an existing one).