Closed Thread Icon

Topic awaiting preservation: moving table rows with DOM? Pages that link to <a href="https://ozoneasylum.com/backlink?for=24644" title="Pages that link to Topic awaiting preservation: moving table rows with DOM?" rel="nofollow" >Topic awaiting preservation: moving table rows with DOM?\

 
Author Thread
Kaniz
Bipolar (III) Inmate

From:
Insane since: Jun 2003

posted posted 01-10-2005 22:52

For example, I have a table like

code:
<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

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 01-10-2005 23:11

To ease the things you should turn you markup to :

code:
<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)

Kaniz
Bipolar (III) Inmate

From:
Insane since: Jun 2003

posted posted 01-11-2005 15:42

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)

code:
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)

« BackwardsOnwards »

Show Forum Drop Down Menu