DOM table manipulation not consistent in IE vs Mozilla
J. Baute
I'm trying to write some javascript code that will swap two rows in a
table, in an attempt to provide users with an easy and visual way to
manually change the order of the listed items in a table.
The sample code works as it should in IE, and switches the two rows
nicely.
In Mozilla however it fails the first time, but for some odd reason it
works fine afterwards.
Mozilla doesn't seem to be removing the duplicated node the first time,
which makes it appear as if an extra node is inserted into the table
(which is actualy the case), but on subsequent attempts, it seems to be
removing the duplicated node perfectly...
So why not the first time?
Any help would be appreciated.
regards,
J.
--- start code ---
<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function switchRow() {
var table = document.getElementById("test")
var oRows = table.getElementsByTagName("TR");
var oTDs;
var numix;
var newTR = document.createElement("TR");
var NumRowA = 1;
var NumRowB = 2;
oTDs = oRows[NumRowB].getElementsByTagName("TD");
for (numix = 0; numix < oTDs.length; numix++) {
var newTD = document.createElement("TD");
newTD.innerHTML = oTDs[numix].innerHTML;
newTD.className = oTDs[numix].className;
newTR.insertBefore(newTD, null);
}
// using table object directly doesn't work on IE (o_O)
// but this indirect approach does the trick...
oRows[NumRowA].parentNode.insertBefore (newTR, oRows[NumRowA]);
// remove node
oRows[NumRowB].parentNode.removeChild(oRows[NumRowB].nextSibling,
true);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<button onclick="switchRow();">switch</button>
<table border="1" id="test">
<tr>
<td>one</td>
<td>nitron</td>
</tr>
<tr>
<td>two</td>
<td>soldiers</td>
</tr>
<tr>
<td>three</td>
<td>analysis</td>
</tr>
<tr>
<td>four</td>
<td>dark heart</td>
</tr>
</table>
</BODY>
</HTML>
--- end code
Dietmar Meier
> I'm trying to write some javascript code that will swap two rows in a
> table, in an attempt to provide users with an easy and visual way to
> manually change the order of the listed items in a table.
To swap two nodes in the DOM tree, you don't have to create a third one.
I always use something like:
function swapChildren(oChild1, oChild2) {
var oParent1 = oChild1.parentNode,
oParent2 = oChild2.parentNode,
oSib1 = oChild1.nextSibling,
oSib2 = oChild2.nextSibling;
if (oSib2 != oChild1) {
oParent2.insertBefore(oChild1, oSib2);
}
if (oSib1 != oChild2) {
oParent1.insertBefore(oChild2, oSib1);
}
}
Using that, your function switchRow() could be as short as
function switchRow(nRow1, nRow2) {
var oTable, aRows;
if (document.getElementById
&& (oTable = document.getElementById("test"))
&& (aRows = oTable.rows)
&& aRows[nRow1]
&& aRows[nRow2]
) {
swapChildren(aRows[nRow1], aRows[nRow2]);
}
}
ciao, dhgm
RobG
> hi,
>
> I'm trying to write some javascript code that will swap two rows in a
> table, in an attempt to provide users with an easy and visual way to
> manually change the order of the listed items in a table.
>
>
> Any help would be appreciated.
>
> regards,
> J.
>
> --- start code ---
> <HTML>
> <HEAD>
>
> <SCRIPT LANGUAGE=javascript>
> <!--
>
> function switchRow() {
> var table = document.getElementById("test")
> var oRows = table.getElementsByTagName("TR");
> var oTDs;
> var numix;
> var newTR = document.createElement("TR");
>
> var NumRowA = 1;
> var NumRowB = 2;
>
> oTDs = oRows[NumRowB].getElementsByTagName("TD");
>
> for (numix = 0; numix < oTDs.length; numix++) {
> var newTD = document.createElement("TD");
> newTD.innerHTML = oTDs[numix].innerHTML;
> newTD.className = oTDs[numix].className;
> newTR.insertBefore(newTD, null);
> }
> // using table object directly doesn't work on IE (o_O)
> // but this indirect approach does the trick...
Note that in IE you need to add new rows to the tbody, not directly
to the table. Even if you don't create a tbody element or code one
in your HTML, browsers will insert one where they feel appropriate
(the HTML spec says tables must have a tbody)..
When appending rows to a table, Gecko browsers seem infer that you
really meant to add it to the tbody, but IE doesn't. So add rows to
the tbody and everyone's happy.
A simple fix is to code a tbody element in your HTML and put the
table id on that rather than the table tag. You can also have
multiple tbodys, so you can add rows to different parts of your table
without row counting or other hacks.
;-p
[...]
--
Rob
J. Baute
works like a charm!