DOM table manipulation not consistent in IE vs Mozilla

J

J. Baute

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.

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
 
D

Dietmar Meier

J. Baute said:
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.
Click to expand...

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
 
R

RobG

J. Baute said:
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...
Click to expand...

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

[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help with <rowspan> in an HTML table 1
Only one table shows up with the information 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image shifts to the right when export the page to pdf 4
How to have two html audio players on one page? 0
DOM Scripting Not Working In IE 9
slow response in table cells <TD> to mouseover with IE6 but fine inFirefox. 4

Members online

Total: 543 (members: 1, guests: 542)
Robots: 394

Forum statistics

Threads
474,262
Messages
2,571,048
Members
48,769
Latest member
Clifft

Latest Threads

Top