Javascript仿Excel的选择效果

<html>

<head>

{

text-align:center;

vertical-align:center;

height:30px;

}

</style>

function $(id)

{

return document.getElementById(id);

};

function initTableData()

{

$("table1").style.cursor="crosshair";

var currentTdValue=1;

var startRow=0;

var startCell=0;

for(var i=0;i < $("table1").rows.length;i++)

{

for(var j=0;j < $("table1").rows[i].cells.length;j++)

{

$("table1").rows[i].cells[j].innerText=currentTdValue;

$("table1").rows[i].cells[j].onselectstart=function(){return false};

$("table1").rows[i].cells[j].positionRow=i;

$("table1").rows[i].cells[j].positionCell=j;

$("table1").rows[i].cells[j].onmousemove=function(){selectMultiCell(event)};

$("table1").rows[i].cells[j].onmousedown=function(){selectCell(event)};

currentTdValue++;

}

function selectMultiCell(e)

{

if(e.button==1)

{

clearSelectedArea($("table1"));

var endRow=e.srcElement.positionRow;

var endCell=e.srcElement.positionCell;

for(var m=Math.min(startRow,endRow);m<=Math.max(startRow,endRow);m++)

{

for(var n=Math.min(startCell,endCell);n<=Math.max(startCell,endCell);n++)

{

$("table1").rows[m].cells[n].style.backgroundColor="#eeeeee";

}

};

function selectCell(e)

{

if(e.button==1)

{

startRow=e.srcElement.positionRow;

startCell=e.srcElement.positionCell;

clearSelectedArea($("table1"));

e.srcElement.style.backgroundColor="#eeeeee";

}

};

function clearSelectedArea(oTable)

{

for(var i=0;i < oTable.rows.length;i++)

{

for(var j=0;j < oTable.rows[i].cells.length;j++)

{

oTable.rows[i].cells[j].style.backgroundColor="";

}

};

</script>

</head>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

posted @ 2008-05-30 14:58 随机阅读(1067) 评论(1) 收藏举报

刷新页面返回顶部

Javascript仿Excel的选择效果

公告