Double Click to Move Table Row Javascript

Javascripts > Misc Javascripts > Double Click to Move Table Row

Script Title: Double Click to Move Table Row

Description: Script allows users to move rows up and down on a table by simply double-clicking on the source row and then again on the destination row.

Example: Available

Table containing move functions (id="mainTable"):

row 0 cell 0	row 0 cell 1	row 0 cell 2
row 1 cell 0	row 1 cell 1	row 1 cell 2
row 2 cell 0	row 2 cell 1	row 2 cell 2
row 3 cell 0	row 3 cell 1	row 3 cell 2
row 4 cell 0	row 4 cell 1	row 4 cell 2
row 5 cell 0	row 5 cell 1	row 5 cell 2

Credit: Script created by 4thorder(TM)

Copy the following code into your HEAD tags.

<script> // All material contained within this page is the property of 4thorder(TM) // Copyright © 2004. All rights reserved. // // Author: Michael Falatine // Authors email: 4thorder@4thorder.us // // USAGE: // You may use this script for commercial or personal use, however, the copyright is retained // by 4thorder (TM). // Set event handlers ------------ document.ondblclick=onDBLClickHandler; document.onmouseover=onMouseOverHandler; document.onmouseout=onMouseOutHandler; document.onkeypress = function esc(e) { var baseLocation=document.all.mainTable document.all.rowId.value="disabled"; if(typeof(e) == "undefined") { e=event; } if (e.keyCode == 27) { for (i=0; i < baseLocation.rows.length; i++) { baseLocation.rows(i).className='rowOnMouseOut'; } } } // END ------------ // handler functions ------------ function onDBLClickHandler() { var baseLocation=document.all.mainTable; var currentElement=event.srcElement.parentElement; var previousID=document.all.rowId.value; var presentID=currentElement.getAttribute("id"); //reset rowID and background for clicking outside of table row if(currentElement.tagName == "TR" && presentID == "") { document.all.rowId.value="disabled"; for (i=0; i < baseLocation.rows.length; i++) { baseLocation.rows(i).setAttribute("id",i+"r") baseLocation.rows(i).className='rowOnMouseOut'; } } else { if(currentElement.tagName == "TR") { if(previousID == "disabled") { // set rowID : set background to "on click" color document.all.rowId.value=presentID; currentElement.className='rowOnDBLClick'; } else { //set source row id : strip "r" from id fromID=parseInt(previousID,10) //set target row id : strip "r" from id toID=parseInt(presentID,10) // move row : clear background : clear rowID from container baseLocation.moveRow(fromID,toID); initTableRows(); } } } } function onMouseOverHandler() { var baseLocation=document.all.mainTable; var currentElement=event.srcElement.parentElement; var presentID=currentElement.getAttribute("id"); if(currentElement.tagName == "TR" && presentID != "") { baseLocation.rows(presentID).className='rowOnMouseOver'; } } function onMouseOutHandler() { var baseLocation=document.all.mainTable; var currentElement=event.srcElement.parentElement; var previousID=document.all.rowId.value; var presentID=currentElement.getAttribute("id"); if(currentElement.tagName == "TR" && presentID != "") { if(presentID != previousID) { baseLocation.rows(presentID).className='rowOnMouseOut'; } else { baseLocation.rows(presentID).className='rowOnDBLClick'; } } } // END ------------ // set ID's for each row(id=#r) : intialize row styles : row ID container value ------------ function initTableRows() { var baseLocation=document.all.mainTable; document.all.rowId.value="disabled"; for (i=0; i < baseLocation.cells.length; i++) { baseLocation.cells(i).unselectable = "On"; } for (i=0; i < baseLocation.rows.length; i++) { baseLocation.rows(i).setAttribute("id",i+"r") baseLocation.rows(i).className='rowOnMouseOut'; } } </script> <style> .rowOnMouseOver{background-color:#FFFFFF; cursor:pointer; border:1px solid #000000; text-align:center; color:#000000; font-size:8pt; font-family:Tahoma } .rowOnMouseOut{background-color:#9DB8E3; cursor:pointer; border:1px solid #000000; text-align:center; color:#000000; font-size:8pt; font-family:Tahoma } .rowOnDBLClick{background-color:#F2E973; cursor:pointer; border:1px solid #000000; text-align:center; color:#000000; font-size:8pt; font-family:Tahoma } </style>

Copy the following code into your BODY tag.

<body onload="initTableRows()">

Copy the following code into the BODY of your html page.

<input type="hidden" id="rowId"> <p align="center"> <br> Table containing move functions (id="mainTable"): </p> <TABLE id="mainTable" width=300 align=center> <TR> <TD>row 0 cell 0</TD> <TD>row 0 cell 1</TD> <TD>row 0 cell 2</TD> </TR> <TR> <TD>row 1 cell 0</TD> <TD>row 1 cell 1</TD> <TD>row 1 cell 2</TD> </TR> <TR> <TD>row 2 cell 0</TD> <TD>row 2 cell 1</TD> <TD>row 2 cell 2</TD> </TR> <TR> <TD>row 3 cell 0</TD> <TD>row 3 cell 1</TD> <TD>row 3 cell 2</TD> </TR> <TR> <TD>row 4 cell 0</TD> <TD>row 4 cell 1</TD> <TD>row 4 cell 2</TD> </TR> <TR> <TD>row 5 cell 0</TD> <TD>row 5 cell 1</TD> <TD>row 5 cell 2</TD> </TR> </TABLE>

Enter your name and email address to have this script sent right to your Inbox for later viewing.

First Name Last Name Email

<reallybig.com>
Web Builder Network Portal

WebBuilderZone
The Largest directory of Web Building resources on the 'Net!

Reallybig Forums
Ask a question, join a discussion, start a thread.

Bignosebird
FREE CGI scripts, Web tutorials, essential HTML tricks and more!

Fontpool
1000+ Truetype fonts for PC & MAC!

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

DHTMLShock
Add life to your site with these DHTML scripts!

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!

Sitecritique.net
Friendly community where you can get a site critique - or give one!

Advertise
on the
Reallybig.com
Network