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

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）呢？
...全文
131 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
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>
excel的使用
你一定会问，是不是很难学呀？其实这一点儿也不难，可以说非常简便，不信你就跟我试一试。以绘制y=|lg（6+x^3）|的曲线为例，其方法如下： 在某张空白的工作表中，先输入函数的自变量：在A列的A1格输入"X="，表明这...
asp.net知识库
鼠标放在一个连接上，会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与IFame组件,达到页的切换效果 HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署...
Unity-UGUI太难用？！自定义适配触摸屏和鼠标的ScrollView组件
自定义适配触摸屏和鼠标的ScrollView组件Unity自带的ScrollView组件实在太难用了！1. 当用户把鼠标放在内容按钮上时，无法滑动ScrollView2.新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式...
用GUI自动控制键盘和鼠标
用GUI自动控制键盘和鼠标 --出处 https://automatetheboringstuff.com/chapter18/用GUI自动控制键盘和鼠标了解用于编辑电子表格，下载文件和启动程序的各种Python模块是有用的，但有时候没有任何需要使用的应用...
ggThemeAssist｜鼠标调整主题，并返回代码
生物信息学习的正确姿势NGS系列文章包括NGS基础、高颜值在线绘图和分析、转录组分析（Nature重磅综述|关于RNA-seq你想知道的全在这）、ChIP-seq分析（ChIP-se...
JavaScript

87,955

社区成员

224,621

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章