인기검색어

 
자바스크립트

테이블 가로(ROW) 라인 이동

작성자 정보

  • 관리자 작성
  • 작성일

컨텐츠 정보

본문

<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
등록된 댓글이 없습니다.
목록

최근글

새댓글

  • 댓글이 없습니다.