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"):
Credit: Script created by 4thorder(TM)
Copy the following code into your <HEAD></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 between the <BODY></BODY> tags 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