嗯 嗯 我以前主要是搞java server端的编程 javascript用得少，至少用得不深
现在手上有个js任务，完成大部分，也碰到一些问题，目前要做的是，拖动选择table单元格功能，像excel里面选择表格一样，选择后单元格边框颜色变黑，能够任意拖动。
不晓得有js牛人搞过冒有，可以指点下不。
现在手上有个js任务，完成大部分，也碰到一些问题，目前要做的是，拖动选择table单元格功能，像excel里面选择表格一样，选择后单元格边框颜色变黑，能够任意拖动。
不晓得有js牛人搞过冒有，可以指点下不。
你只能用div或span模拟table。
找个拖拽的例子吧。http://blog.csdn.net/zsulwq0915/archive/2007/05/18/1615061.aspx
获得鼠标按下开始拖拽的坐标和弹起结束拖拽的坐标
然后对table的cell进行遍历，判断在其范围内的左上、右下角的cell，获得其rowIndex和cellIndex属性
然后通过这两个属性就可以确定所选范围了。
http://muxrwc.01www.cn/wc/cdrag.htm 好似能支持所有浏览器。
你下过我的<js web excel 0.57 + js vm> 吧?
建个矩阵,在这个路径下可以找到对应的实现方法cop\excel\matrix.js比如,生成了这样一个矩阵:
1,0,1,0,0,1,1
0,0,1,1,1,0,1
0,0,1,0,1,0,1
1,1,1,1,1,1,1 对应的数组
var mx=[
[1,0,1,0,0,1,1],
[0,0,1,1,1,0,1],
[0,0,1,0,1,0,1],
[1,1,1,1,1,1,1]
];实体 :1
被合并 :0
-------------------------
点下鼠标的时候记录表格位置,矩阵中对应的位置如下
1,0,1,0,0,1,1
0,0,x,1,1,0,1
0,0,1,0,1,0,1
1,1,1,1,1,1,1
-------------------------
拖动并松开鼠标的时候记录位置,矩阵中对应的位置如下
1,0,1,0,0,1,1
0,0,x,1,1,0,1
0,0,1,0,x,0,1
1,1,1,1,1,1,1
-------------------------
那么:
top = 1
left = 2
right = 4
bottom = 2
var oTable= document.getElementById("Table1");//这里只是用来演示,具体由你自己决定
var arr = new Array();
for(var i=top;i<=bottom ;i++)
{
for(var j=left;j<=right;j++)
{
if( mx[i][j]== 1 )
arr.push( oTable.rows.item( i ).cells.item( j ) );
}
}//arr里装的是你所选择的实体单元格
{ var coln = 0;
for( var i=0;i<=c;i++)
coln += mx[r][i];
return coln;
}var oTable= document.getElementById("Table1");//这里只是用来演示,具体由你自己决定
var arr = new Array();
for(var i=top;i <=bottom ;i++)
{
for(var j=left;j <=right;j++)
{
if( mx[i][j]== 1 )
arr.push( oTable.rows.item( i ).cells.item( getUnit(j) ) );
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script src="matrix.js" type="text/javascript"></script>
<body>
<table width="200" border="1" id="table1">
<tr>
<td colspan="2" rowspan="3" ondblclick="alert(this.cellIndex);">a</td>
<td colspan="3" ondblclick="alert(this.cellIndex);">b</td>
<td rowspan="3" ondblclick="alert(this.cellIndex);">c</td>
<td ondblclick="alert(this.cellIndex);">d</td>
</tr>
<tr>
<td ondblclick="alert(this.cellIndex);">1</td>
<td ondblclick="alert(this.cellIndex);">2</td>
<td ondblclick="alert(this.cellIndex);">3</td>
<td ondblclick="alert(this.cellIndex);">e</td>
</tr>
<tr>
<td colspan="2" ondblclick="alert(this.cellIndex);">4</td>
<td ondblclick="alert(this.cellIndex);">5</td>
<td ondblclick="alert(this.cellIndex);">f</td>
</tr>
<tr>
<td ondblclick="alert(this.cellIndex);">g</td>
<td ondblclick="alert(this.cellIndex);">h</td>
<td ondblclick="alert(this.cellIndex);">i</td>
<td ondblclick="alert(this.cellIndex);">j</td>
<td ondblclick="alert(this.cellIndex);">k</td>
<td ondblclick="alert(this.cellIndex);">l</td>
<td ondblclick="alert(this.cellIndex);">m</td>
</tr>
</table>
<div id="view_box0">0</div>
<div id="view_box1">0</div>
<div id="view_box2">0</div>
<p> </p>
<p> </p>
</body>
</html>
<script>
matrix.prototype.getRect = function(oCurCell,robj)
{
var r= oCurCell.parentNode.rowIndex;
var c= oCurCell.cellIndex;
var rown = r;
var coln = this.getColNumb( r, (c+1) );
if( oCurCell.rowSpan!=null )
rown += oCurCell.rowSpan-1;
if( oCurCell.colSpan!=null )
coln += oCurCell.colSpan-1; if( robj.bottom < rown )
robj.bottom = rown;
if( robj.right < coln )
robj.right = coln;
return robj;
};
var irect = {top:0,left:0,bottom:0,right:0};
var omatrix = new matrix(document.getElementById("table1") );
//-------------演示矩阵-------------
document.getElementById( "view_box0" ).innerHTML = "";
for(i=0;i<document.getElementById("table1").rows.length;i++)
{
document.getElementById( "view_box0" ).innerHTML += omatrix.tp[i] + "<br/>";
}
//-------------演示矩阵结束-------------
//--------------------------------------
document.onmousedown = function(event)
{ var event = event||window.event;
var oCurCell= document.elementFromPoint(event.clientX,event.clientY);
irect = {top:0,left:0,bottom:0,right:0};
if( oCurCell!=null && oCurCell.tagName=="TD")
{
irect.top = oCurCell.parentNode.rowIndex;
irect.left = omatrix.getColNumb( irect.top, oCurCell.cellIndex+1);
irect = omatrix.getRect( oCurCell,irect) ;
}
}
//--------------------------------------
document.onmouseup = function(event)
{ var event = event||window.event;
var oCurCell = document.elementFromPoint(event.clientX,event.clientY);
if(oCurCell!=null && oCurCell.tagName=="TD")
{
var irect2 = omatrix.getRect( oCurCell,irect) ;
//-------------演示范围-------------
var view_box1 = document.getElementById( "view_box1" );
view_box1.innerHTML = "top:"+irect.top+"|" + "left:"+irect.left+"|" +"bottom:"+irect.bottom+"|" +"right:"+irect.right;
//-------------演示范围结束-------------
var arr = new Array();
for(var i=irect.top;i <=irect.bottom ;i++)
{ var c = 0;
for(var j=0;j<irect.left;j++) //左
{ if( omatrix.tp[i][j] == 1 )
c++;
}
for(var j=irect.left;j<=irect.right;j++)
{
if( omatrix.tp[i][j] == 1 )
{
arr.push( omatrix.otable.rows.item( i ).cells.item( c ) );
c++;
}
}
}
//-------------演示范围包含的值-------------
var view_box2 = document.getElementById( "view_box2" );
var str = "";
for(var i=0;i<arr.length;i++)
str+= "|"+arr[i].innerText;
view_box2.innerHTML = str;
//-------------演示范围包含的值结束-------------
}
}
//--------------------------------------
</script>
我有了基本思路 恩 没有建矩阵 按照鼠标选择的单元格offsetleft,offsettop来决定是否高亮显示。
这个功能已经基本完成了
比如 有三行， 鼠标从 第一行二个单元格 拖动到 第二行第四个单元格。
这种情况下，第二行第一个单元格也会被选中，有被选中的阴影区域，
我不想让第二行第一个单元格在在选择表格时出现阴影，该怎么办？
楼上同学辛苦了 结贴时我会给分的
思路还是以前思路
主要是加了个onselectstart=return false事件
这样就可以阻止鼠标拖动选择table里面得文字了
我看过fckeditor源码，里面的合并 也采用类似矩阵的做法，把一个单元格映射成一个矩阵，我看了代码一大堆，想
干脆按自己思路来实现得了。 因为在高亮显示单元格的时候，我们就可以获取高亮显示的cells集合对象.
基本思路是把这些单元格按行分组 先横向合并 再垂直合并 方法就调用以前的相邻单元格合并算法。 现在解决跨浏览器问题，ie表现很好，还要看看 firefox,chrome,safari等浏览器表现。 目前ie达到了我的预期效果，其实我这个table功能是类似word中画table功能，行列增加或删除，拆分合并等等都要考虑到。
以前选择单元格没做处理，就按默认的鼠标拖动选择单元格，不过客户部满意，嫌弃太难看，只好把这个功能完善。