87,992
社区成员
发帖
与我相关
我的任务
分享javascript 实现像excel那样 拽动选取多个cell
请问 javascript 怎么按下鼠标后拖出一个方块，去选取多个<td>
...全文
请发表友善的回复…
发表回复
felixrong 2008-06-01
- 打赏
- 举报
RH_RAndom 太厉害了。谢谢
xingqiliudehuanghun 2008-05-30
- 打赏
- 举报
mark
YH_Random 2008-05-30
- 打赏
- 举报
<html>
<head>
<style type="text/css">
td
{
text-align:center;
vertical-align:center;
height:30px;
}
</style>
<script type="text/javascript">
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>
<body onload="initTableData()">
<span id="s1"></span>
<table border="1" width="100%" cellspacing="0" cellpadding="0" id="table1" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
超级无敌咕咕鸡 2008-05-29
- 打赏
- 举报
。。楼主去看看 extjs里面的 grid DEMO 吧
一把编程的菜刀 2008-05-27
- 打赏
- 举报
实在不明白什么意思
felixrong 2008-05-27
- 打赏
- 举报
怎么看不懂啊。
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
我想实现的是当我从11 向28 拖拽的时候 之后
只有覆盖了下面的数字
11 12 13 14
18 19 20 21
25 26 27 28
单是一般情况是
11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
我想实现的是当我从11 向28 拖拽的时候 之后
只有覆盖了下面的数字
11 12 13 14
18 19 20 21
25 26 27 28
单是一般情况是
11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
nice90 2008-05-27
- 打赏
- 举报
楼主要做什么东东？透露一点啊。呵呵。
zhao860216 2008-05-27
- 打赏
- 举报
http://china.ctrl1.com/demo/CoolTable.htm
wanghr100 2008-05-25
- 打赏
- 举报
手上正好有个demo
http://china.ctrl1.com/demo/CoolTable.htm
http://china.ctrl1.com/demo/CoolTable.htm
qidizi 2008-05-24
- 打赏
- 举报
在整个操作区设置响应拖拽事件函数,当发生这个事件时,未放开此标时,每一次的移动都检查是否移动到新的方块,是,在此新方块上设置新id,否,不理会,放开此标后.结束事件处理.然后进行相关操作后,如在选定区域上点右键就弹出菜单给出可用的操作,当点左键时删除新赋id变成只选定当前方块.这样就可以通过id名来处理多选方块了.
