테이블 가로(ROW) 라인 이동
페이지 정보
작성자
관리자
작성일
2008.02.11 14:19
4,805 조회
본문
<html>
<head>
<title></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>
<head>
<title></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>
댓글 0