Topic awaiting preservation: moving table rows with DOM? (Page 1 of 1)

For example, I have a table like

<table>

<tr id=1>

<td><a href="javascript:up(1);">up</a>/<a href="javascript:down(1);">dn</a></td><td>.....data</td><td>...</td>

</tr>

<tr id=2>

<td><a href="javascript:up(2);">up</a>/<a href="javascript:down(2);">dn</a></td><td>.....data</td><td>...</td>

</tr>

..

..

..

</table>

and clicking on up/down will move that row up or down one in the table, are there any scripts out there to do this? been fiddling around a bit, but cant seem to get things working quite the way I want, or atleast a pointer in the right direction would be spiff.

thanks

To ease the things you should turn you markup to :

<table>

	<tr>

		<td><span onclick="move(this,-1)" >up</span><span onclick="move(this,1)" >down</span></td>

		<td>lorem...</td>

	</tr>

	<tr>

		<td><span onclick="move(this,-1)" >up</span><span onclick="move(this,1)" >down</span></td>

		<td>lipsum...</td>

	</tr>

</table>

Passing this to the function will provide you the handle of the SPAN. Using the .parentNode property several times will lead you to the TR you want to move.

Then you should pick its previousSibling ( if it exists and the direction is up ) or nextSibling ( if it exists and the direction is down ), clone the current TR, replace the it by the sibling and finally append the clone before or after it ( depending of the direction ).

There's certainly another method though.
Hope that helps.

ps: don't hesitate to check the W3C DOM compatibility tables by Peter-Paul KOCH



(Edited by poi on 01-10-2005 23:13)

That page is a great resource, and is helping me with some other questions I've had kicking around my head.

Thanks, its gotten me on the right track (rather be put on the right track then given the answer .... )

Since I know this is going to be used in an IE-only enviroment, stab #1 at it was (changing to the markup you had)

function move(item,direction)

{

var trRow = item.parentNode.parentNode;

if(direction == -1)

trRow.swapNode(trRow.nextSibling);

else

trRow.swapNode(trRow.previousSibling);

}

which does exactly what I need it to do, however...for geeky purposes, going to try and get a more cross-browser friendly solution going

(Edited by Kaniz on 01-11-2005 16:04)