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

xhunanpp 2004-09-27 02:50:50
我用table 表格,
实现:
用鼠标调整左右上下表格宽度,单独调整左右或上下是没有什么问题,
表1
a┌─────┬b─────┐c
e├─────┼f─────┤g
h├─────┼i─────┤j
k└─────┴m─────┘n

Code:
-----------------------
<TABLE Id="MyTable" runat="server" border="1" cellPadding="1" height=88 cellSpacing="1" width="300">
<TR Id="MyRow01" height=22 onmousemove="MoveRow 'MyRow01'">
<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" onmousemove="MoveCol 'MyCol04'">04</TD>
<TD Width="100" Id="MyCol05" onmousemove="MoveCol 'MyCol05'">05</TD>
<TD Width="100" Id="MyCol06" onmousemove="MoveCol 'MyCol06'">06</TD>
</TR>
<TR Id="MyRow03" height=22 onmousemove="MoveRow 'MyRow03'">
<TD Width="100" Id="MyCol07" onmousemove="MoveCol 'MyCol07'">07</TD>
<TD Width="100" Id="MyCol08" onmousemove="MoveCol 'MyCol08'">08</TD>
<TD Width="100" Id="MyCol09" onmousemove="MoveCol 'MyCol09'">09</TD>
</TR>
<TR Id="MyRow04" height=22 onmousemove="MoveRow 'MyRow04'">
<TD Width="100" Id="MyCol10" onmousemove="MoveCol 'MyCol10'" >10</TD>
<TD Width="100" Id="MyCol11" onmousemove="MoveCol 'MyCol11'">11</TD>
<TD Width="100" Id="MyCol12" onmousemove="MoveCol 'MyCol12'">12</TD>
</TR>
</TABLE>
-------------------------------

问题如下:

我把鼠标放在c-h段之间,目的是移动C-H段的线条,调整列的宽度,
但是事件先是触发TR事件,再触发TD的事件,
所以列(TD)的线条(C-H)无法实现移动,
只能移动行(TR)的线条(K-N)

怎么样区别鼠标条动的是行(K-N)还是列(C-H)呢?
...全文
118 6 打赏 收藏 举报
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
tpf9000 2004-09-27
哦,不懂,没搞过,学习
  • 打赏
  • 举报
回复
gjd111686 2004-09-27
你可以通过
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就知道鼠标调整的是列还是行了.
  • 打赏
  • 举报
回复
wsyab 2004-09-27
白痴
这是js的板块
  • 打赏
  • 举报
回复
tpf9000 2004-09-27
移动C-H?不知道怎么能把C-H扯上关系,是不是图标错了啊
帮你up下
  • 打赏
  • 举报
回复
xhunanpp 2004-09-27
<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> </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>
  • 打赏
  • 举报
回复
xhunanpp 2004-09-27
'源代码:
-----------------------


<!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>
  • 打赏
  • 举报
回复
发帖
JavaScript

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2004-09-27 02:50
社区公告
暂无公告