关于区别鼠标调整左右上下表格宽度的问题（很难）

'源代码:
-----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DeTableByCol</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="VbScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<Script Language="VbScript">
Dim  CurState  '记录鼠标状态  
Dim  CurDown  '记录鼠标按下  
Dim  CurId  '记录当前Id  
Dim  OldPlace,NewPlace  
'-----------------------
Dim  CurState_  '记录鼠标状态  
Dim  CurDown_  '记录鼠标按下  
Dim  CurId_  '记录当前Id  
Dim  OldPlace_,NewPlace_  

Sub  MoveRow(MyRowID)  

window.status  =window.document.body.scrollTop  
If  CurDown_=False  Then  '鼠标没有按下  
If  window.event.y  +  window.document.body.scrollTop  >  CurTable  +  window.document.body.all(CurId_).offsetTop  +  window.document.body.all(CurId_).offsetHeight+3  Then  
'移动到了相应的部位/改变鼠标 
CurState_=True  
window.document.body.style.cursor="move"  
Else  
CurState_=False  
window.document.body.style.cursor="Default"  
End  If  
CurId_=MyRowID
End  If   End  Sub  
'-----------------------
 
Sub  MoveCol(MyColId)  

window.status  =window.document.body.scrollLeft  
If  CurDown=False  Then  '鼠标没有按下  
If  window.event.x  +  window.document.body.scrollLeft  >  CurTable  +  window.document.body.all(CurId).offsetLeft  +  window.document.body.all(CurId).offsetWidth-3  Then  
'移动到了相应的部位/改变鼠标 
CurState=True  
window.document.body.style.cursor="col-resize"  
Else  
CurState=False  
window.document.body.style.cursor="Default"  
End  If  
CurId=MyColId  
End  If

End  Sub  
 
Sub  UpBody()  '鼠标抬起/一切恢复原状态  
if window.document.body.style.cursor="col-resize" then
If  CurState=True  Then  
'***************************调整表格**************************  
'调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20   NewPlace=window.event.x  +  window.document.body.scrollLeft  
If  (MyDiv.offsetLeft  +  MyLine.offsetLeft)  >  CurTable  +  window.document.body.all(CurId).offsetLeft  +20  Then  
window.document.body.all(CurId).Width  =  window.document.body.all(CurId).Width  -  (OldPlace  -  NewPlace)  
MyTable.width=MyTable.Width  -  (OldPlace  -  NewPlace)  
window.document.body.all(CurId).innertext=window.document.body.all(CurId).Width
End  If  
'*************************************************************  
CurState=False  
CurDown=False  
MyDiv.style.display="None"  
window.document.body.style.cursor="Default"  
End  If 
end if
if window.document.body.style.cursor="move" then
If  CurState_=True  Then  
'***************************调整表格**************************  
'调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20  
NewPlace_=window.event.y  +  window.document.body.scrollTop If  (MyDiv.offsetTop  +  MyLine.offsetTop) > CurTable + window.document.body.all(CurId_).offsetTop  + 20 Then  
window.document.body.all(CurId_).Height  =  window.document.body.all(CurId_).Height  -  (OldPlace_  -  NewPlace_)  
MyTable.height=MyTable.height -  (OldPlace_  -  NewPlace_)  
'window.document.body.all(CurId_).innertext=window.document.body.all(CurId_).Height
End  If  
'*************************************************************  
CurState_=False  
CurDown_=False  
MyDiv.style.display="None"  
window.document.body.style.cursor="Default" 
end if
end if
End  Sub  
 
Sub  DownBody()  '鼠标按下  
if window.document.body.style.cursor="col-resize" then
If  CurState=True  Then  
CurDown=True  
'*********定位竖线**********  
MyDiv.style.display=""            '层可见  
MyLine.style.Height=  MyTable.offsetHeight 
MyLine.style.width  =  1  
MyDiv.style.Left  =  window.event.x  +  window.document.body.scrollLeft  -  MyLine.offsetLeft    
MyDiv.style.Top  =  MyTable.offsetTop  -  MyLine.offsetTop    
'***************************  
OldPlace=window.event.x  +  window.document.body.scrollLeft  
End  If
end if
if window.document.body.style.cursor="move" then
If  CurState_=True  Then  
CurDown_=True  
'*********定位竖线**********  
MyDiv.style.display=""            '层可见  
MyLine.style.width=  MyTable.offsetWidth  
MyLine.style.height  =  1  
MyDiv.style.top  =  window.event.y  +  window.document.body.scrollTop  -  MyLine.offsetTop    
MyDiv.style.left  =  MyTable.offsetTop  -  MyLine.offsetTop    
'***************************  
OldPlace_=window.event.y  +  window.document.body.scrollTop
End  If
end if

End  Sub  
 
Sub  MoveBody()  '鼠标移动  
if window.document.body.style.cursor="col-resize" then
If  CurDown=True  Then  '鼠标按下状态  
MyDiv.style.Left  =  window.event.x  +  window.document.body.scrollLeft  -  MyLine.offsetLeft  
window.document.body.style.cursor="col-resize"  
End  If 
end if
if window.document.body.style.cursor="move" then
If  CurState_=True  Then  
MyDiv.style.top  =  window.event.y  +  window.document.body.scrollTop  -  MyLine.offsetTop  
window.document.body.style.cursor="move"  
end if
end if
End  Sub  
 
Sub  SelectBody()  '鼠标选择文本[不支持动态调整？]  
If  CurDown=True  Then  '鼠标按下于调整状态  
window.event.returnvalue=False  
End  If  

If  CurDown_=True  Then  '鼠标按下于调整状态  
window.event.returnvalue=False  
End  If  
End  Sub  

Sub BtnOnclick()
MyTable.rows(CInt(txt_1.value)).cells(CInt(txt_2.value)).bgColor=txt_3.value
End Sub
</Script>
</HEAD>

解决方案 »

  1.   

    <BODY onmousedown="DownBody()" onmouseover="MoveBody()" onmouseup="UpBody()" onselectstart="SelectBody()">
    <DIV Id="MyDiv" style="DISPLAY:  none;  Z-INDEX:  1;  LEFT:  12px;  WIDTH:  28px;  POSITION:  absolute;  TOP:  50px;  HEIGHT:  201px">
    <hr Id="MyLine" width="2" size="56" noshade Color="black">
    </DIV>
    <TABLE Id="MyTable" runat="server" border="1" cellPadding="1" height=88 cellSpacing="1" width="300">
    <TR Id="MyRow01" height=22>
    <TD Width="100" Id="MyCol01" onmousemove="MoveCol  'MyCol01'">01</TD>
    <TD Width="100" Id="MyCol02" onmousemove="MoveCol  'MyCol02'">02</TD>
    <TD Width="100" Id="MyCol03" onmousemove="MoveCol  'MyCol03'">03</TD>
    </TR>
    <TR Id="MyRow02" height=22 onmousemove="MoveRow  'MyRow02'">
    <TD Width="100" Id="MyCol04">04</TD>
    <TD Width="100" Id="MyCol05">05</TD>
    <TD Width="100" Id="MyCol06">06</TD>
    </TR>
    <TR Id="MyRow03" height=22 onmousemove="MoveRow  'MyRow03'">
    <TD Width="100" Id="MyCol07">07</TD>
    <TD Width="100" Id="MyCol08">08</TD>
    <TD Width="100" Id="MyCol09">09</TD>
    </TR>
    <TR Id="MyRow04" height=22 onmousemove="MoveRow  'MyRow04'">
    <TD Width="100" Id="MyCol10">10</TD>
    <TD Width="100" Id="MyCol11">11</TD>
    <TD Width="100" Id="MyCol12">12</TD>
    </TR>
    </TABLE>
    <FONT face="宋体">
    <BR>
    </FONT>
    <P><FONT face="宋体"></FONT>&nbsp;</P>
    <FONT face="宋体">行:</FONT><INPUT id="txt_1" style="WIDTH: 32px; HEIGHT: 22px" type="text" size="1" NAME="txt_1"><FONT face="宋体">列:</FONT><INPUT id="txt_2" style="WIDTH: 32px" type="text" NAME="txt_2"><FONT face="宋体">色:</FONT><INPUT id="txt_3" style="WIDTH: 64px; HEIGHT: 22px" type="text" value="#FF0000" size="5" name="Text1">
    <button id="but" onclick="BtnOnclick()" type="button">改变颜色</button>
    </BODY>
    </HTML>
      

  2.   

    移动C-H？不知道怎么能把C－H扯上关系，是不是图标错了啊
    帮你up下
      

  3.   

    你可以通过
    function GetDefineX(ObjectID)
    {
    var iPositionX=ObjectID.offsetLeft;
    while(ObjectID=ObjectID.offsetParent)
    {
    iPositionX+=ObjectID.offsetLeft;
    }
    return iPositionX;
    }
    function GetDefineY(ObjectID)
    {
    var iPositionY=ObjectID.offsetTop;
    while(ObjectID=ObjectID.offsetParent)
    {
        iPositionY+=ObjectID.offsetTop;
    }
    return iPositionY;
    }来获取元素的绝对位置然后判断event.x和event.y就知道鼠标调整的是列还是行了.