테이블에 <tr></tr>사이의 <td>들을 두번클릭으로 위치를 바꿀수 있습니다. table의 row에 해당되는 부분을 한꺼번에 이동시킬수 있는 자바스크립트입니다.
- 처음 보여지는 화면입니다.
- row 0 cell 0 부분을 더블클릭합니다.
- row 3 cell 0번 이 있는 <tr></tr>을 클릭하여 row부분에 해당되는 부분으로 이동시킵니다.
본예제의 자바스크립트입니다.
<html>
<head>
<title>해피CGI</title>
<script type='text/javascript' language='JavaScript'>
// 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:Verdana }
.rowOnMouseOut {background-color:#9DB8E3; cursor:pointer; border:1px solid #000000; text-align:center; color:#000000; font-size:8pt; font-family:Verdana }
.rowOnDBLClick {background-color:#F2E973; cursor:pointer; border:1px solid #000000; text-align:center; color:#000000; font-size:8pt; font-family:Verdana }
</style>
</head>
<body onload="initTableRows()">
<input type="hidden" id="rowId">
<TABLE id="mainTable" width=400>
<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>
</body>
</html>
|
