SP2 breaks IE

[foldface]

Hi
Sorry but to view the code below you'll have to copy it into a temp.html file,
haven't access to a online web page anymore.
The code switches the rows and columns of a table. Its been tried in the
versions below. Note that it works in the latest version of IE before SP2,
whats changed?
By not working I mean that it'll switch the columns/rows twice then lose
some of the information? Can fix it by substituting the commented out lines
for the ones above.

mozilla 1.7.2, works
firefox 0.9.3, works
IE6.0.2800, works
IE6.0.2900, doesn't work

Any ideas
Ta
F
<style>
..theTableClass
{
border: groove;
}
</style>

<table id=theTable class=theTableClass>
<tr id=realOne>
<td class=Bob sue>Some random text </td>
<td class=Sue>Some random text </td>
<td class=Sue>Some random text </td>
</tr>
</table>

<input type=button value=pressme onclick=SwapColumnsAndRows('theTable')>

<script>

function SwapColumnsAndRows(tableId)
{
var theTable = document.getElementById(tableId)
if(theTable == null) return;

var theTable2 = document.createElement("table");

var numRows = theTable.rows.length;
var numCells = theTable.rows[0].cells.length;

for(var i=0; i<numCells; i++)
{
var newRow = theTable2.insertRow(-1)
for(var j=0; j<numRows; j++)
{
var cell = theTable.rows[j].cells[i];
//var newCell = theTable2.rows[i].insertCell(-1);
var newCell = newRow.insertCell(-1);
SwapCells(cell, newCell);
}
}

while (theTable.rows.length > 0)
{
theTable.deleteRow(0);
}

var numRows = theTable2.rows.length;
var numCells = theTable2.rows[0].cells.length;

for(var i=0; i<numRows; i++)
{
var newRow = theTable.insertRow(-1)
for(var j=0; j<numCells; j++)
{
var cell = theTable2.rows[i].cells[j];
//var newCell = theTable.rows[i].insertCell(-1);
var newCell = newRow.insertCell(-1);
SwapCells(cell, newCell);
}
}

while (theTable2.rows.length > 0)
{
theTable2.deleteRow(0);
}
}

function SwapCells (cell1, cell2)
{
var dummyCell;
if (document.createElement && (dummyCell = document.createElement('td')))
{
cell1.parentNode.replaceChild(dummyCell, cell1);
cell2.parentNode.replaceChild(cell1, cell2);
dummyCell.parentNode.replaceChild(cell2, dummyCell);
}
}
</script>

[Grant Wagner]

fo******@yahoo.co.uk wrote:

Hi
Sorry but to view the code below you'll have to copy it into a temp.html file,
haven't access to a online web page anymore.
The code switches the rows and columns of a table. Its been tried in the
versions below. Note that it works in the latest version of IE before SP2,
whats changed?
By not working I mean that it'll switch the columns/rows twice then lose
some of the information? Can fix it by substituting the commented out lines
for the ones above.

mozilla 1.7.2, works
firefox 0.9.3, works
IE6.0.2800, works
IE6.0.2900, doesn't work

Here is a little simpler version that works in all the browsers listed above:

<style type="text/css">
..theTableClass {
border: groove;
}
</style>
<table id=theTable class=theTableClass>
<tr id=realOne>
<td class=Bob sue>Some random text </td>
<td class=Sue>Some random text </td>
<td class=Sue>Some random text </td>
</tr>
</table>
<input type=button value=pressme onclick=SwapColumnsAndRows('theTable')>
<script type="text/javascript">
function SwapColumnsAndRows(tableId) {

var theTable = document.getElementById(tableId)
if (!theTable) {
return;
}

var theTable2 = theTable.cloneNode(false);

var numRows = theTable.rows.length;
var numCells = theTable.rows[0].cells.length;

for(var i = 0; i < numCells; i++) {
var newRow = theTable2.insertRow(-1);
for(var j = 0; j < numRows; j++) {
newRow.appendChild(theTable.rows[j].cells[i].cloneNode(true));
}
}

while (theTable.firstChild) {
theTable.removeChild(theTable.firstChild);
}

for (var i = 0; i < theTable2.childNodes.length; i++) {
if (theTable2.childNodes[i].nodeName == 'TBODY') {
theTable.appendChild(theTable2.childNodes[i]);
break;
}
}
}
</script>

- I do a shallow clone [cloneNode(false)] of the original table (initially I had a
solution that involved theTable.parentNode.replaceChild(theTable2, theTable); but it
did not work in Opera 7.54 - you could probably get away with
document.createElement('table'); now)
- I create a new row for each existing row, then do a deep clone [cloneNode(true)]
of each cell and append it to the new row
- I then remove all children from the original table (note all _children_, not all
rows, doing it this way removes the TBODY)
- I then go through the new table, locate the TBODY and append it to original table
(I suppose I should cloneNode() it, but I don't see the need) - it is necessary to
go looking for the TBODY and not just assume it's firstChild because of the
differences between IE and Gecko-based browsers

Using my code should be much faster than swapping each cell into a new table and
swapping them back. Tested and working in:

IE 6.0.2800 and 6.0.2900
Firefox 0.9.3
Mozilla 1.7.2
Opera 7.54

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq