社区
ASP
帖子详情
移动div到表格单元格
Tyro
2000-08-12 10:25:00
加精
页面上有个div,我想把它移动到表格table1的单元格td1上,使div的大小和td1相同,并且恰好覆盖了td1,该怎么做?
最近工作比较忙,没有时间自己研究了,希望能够对所用的方法或属性做点解释,并且有一段源码,最好还要考虑一下有哪些会引起div偏离td1的情况,比如改变了浏览器窗口的大小……
谢谢各位!:)
...全文
322
13
打赏
收藏
移动div到表格单元格
页面上有个div,我想把它移动到表格table1的单元格td1上,使div的大小和td1相同,并且恰好覆盖了td1,该怎么做? 最近工作比较忙,没有时间自己研究了,希望能够对所用的方法或属性做点解释,并且有一段源码,最好还要考虑一下有哪些会引起div偏离td1的情况,比如改变了浏览器窗口的大小…… 谢谢各位!:)
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
13 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
skt642
2001-05-31
打赏
举报
回复
63795关注!
huntout
2000-08-14
打赏
举报
回复
Tyro:
想知道offsetLeft...
在MSDN Library - July 2000 中搜尋主題 Measuring Element Dimension and Location
华南虎哥
2000-08-14
打赏
举报
回复
谢谢Tyro兄,下面我还有一些比较麻烦的问题,不知能不能帮忙看看.
http://210.77.155.27/expert/TopicView.asp?id=24392
Tyro
2000-08-14
打赏
举报
回复
re:hblinux
在table的click事件中添加下面的代码,可以获得点击的单元格,然后处理moveDiv:
Dim objCell
Set objCell = window.event.srcElement
Do While objCell.tagName <> "TD"
Set objCell = objCell.parentElement
Loop
moveDiv(objCell)
VictorYu
2000-08-14
打赏
举报
回复
呵呵,我都没有看见这个论题, 看来改版让我损失好多分耶! 呵呵.
处理一个body的onresize消息就可以了,用一个变量记下当前的TD名.每次resize时调用moveDiv(记录的TD名)
呵呵,试试看.
华南虎哥
2000-08-14
打赏
举报
回复
To:Tyro
我也不是象Huntout及Tyro兄这样属于顶尖高手级的人,做这个当然是糊里糊涂,要多向你们学习,也请教Tyro兄如何改进???
Tyro
2000-08-14
打赏
举报
回复
re:hblinux
呵呵……一改变窗口的大小,div就跑到一边去了
另外在每个td中都写上moveDiv(td?)太笨了吧:)在table的click事件中处理一下,得到当前点击的单元格,一起处理多好呀!
华南虎哥
2000-08-14
打赏
举报
回复
Huntout不愧是高手,我利用他的代码作了一点修改,比较有趣,放出来大家一起欣赏
------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>真酷</title>
</head>
<body>
<br><br><br><br>
<center>
<table border=1 width=337 height=232>
<tr>
<td id=td1 onclick="moveDiv(td1)" width="111" align="center" height="77"><b><font size="6">1</font></b></td>
<td id=td2 onclick="moveDiv(td2)" width="111" align="center" height="77"><b><font size="6">2</font></b></td>
<td id=td3 onclick="moveDiv(td3)" width="111" align="center" height="77"><b><font size="6">3</font></b></td>
</tr>
<tr>
<td id=td4 onclick="moveDiv(td4)" width="111" align="center" height="77"><b><font size="6">4</font></b></td>
<td id=td5 onclick="moveDiv(td5)" width="111" align="center" height="77"><b><font size="6">5</font></b></td>
<td id=td6 onclick="moveDiv(td6)" width="111" align="center" height="77"><b><font size="6">6</font></b></td>
</tr>
<tr>
<td id=td7 onclick="moveDiv(td7)" width="111" align="center" height="78"><b><font size="6">7</font></b></td>
<td id=td8 onclick="moveDiv(td8)" width="111" align="center" height="78"><b><font size="6">8</font></b></td>
<td id=td9 onclick="moveDiv(td9)" width="111" align="center" height="78"><b><font size="6">9</font></b></td>
</tr>
</table>
<div id=div1 style='background-color: #009000; background-repeat: repeat; background-attachment: scroll; position: absolute; left: 100; top: 100; width: 100; height: 100; border-style: solid; border-width: 1px; background-position: 0%'>
<p align="center"><b><font size="7" color="#FF00FF">真酷</font></b></div>
</center>
<script language=javascript>
function moveDiv(itd) {
with (document.all) {
var nLeft = 0;
var nTop = 0;
for (var el = itd; el.tagName != "BODY"; el = el.offsetParent) {
nLeft += el.offsetLeft;
nTop += el.offsetTop;
}
div1.style.pixelLeft = nLeft;
div1.style.pixelTop = nTop;
div1.style.pixelWidth = itd.offsetWidth;
div1.style.pixelHeight = itd.offsetHeight;
}
}
moveDiv(td1)
</script>
</body>
</html>
-------------------------------------------------------------------------------
Tyro
2000-08-14
打赏
举报
回复
re:huntout
如果table设置为width=100%,那么改变窗口大小时div的位置会发生偏移
是否还有其它的情况导致div的位置发生偏移?
属性里有好多种left,如pixelleft,left,offsetleft,这些的区别是什么?
huntout
2000-08-14
打赏
举报
回复
<a href='javascript:moveDiv()'>Move it! :)</a>
<table border=1 width=300 height=300>
<tr><td id=td1>1234567<br>1234567</td><td>1234567<br>1234567</td></tr>
<tr><td>1234567<br>1234567</td><td>1234567<br>1234567</td></tr>
</table>
<div id=div1 style='background:#009000; border:1px solid; position:absolute; left:100px; top:100px; width:100px; height:100px;'>div div</div>
<script language=javascript>
function moveDiv() {
with (document.all) {
var nLeft = 0;
var nTop = 0;
for (var el = td1; el.tagName != "BODY"; el = el.offsetParent) {
nLeft += el.offsetLeft;
nTop += el.offsetTop;
}
div1.style.pixelLeft = nLeft;
div1.style.pixelTop = nTop;
div1.style.pixelWidth = td1.offsetWidth;
div1.style.pixelHeight = td1.offsetHeight;
}
}
</script>
Tyro
2000-08-14
打赏
举报
回复
re:huntout
我用interdev,怎么写完style后显示的属性中没有pixelleft呀?
offsetLeft的意思我知道一些,但是style.left是什么意思呀?
华南虎哥
2000-08-13
打赏
举报
回复
关注,有时间分析分析
Tyro
2000-08-13
打赏
举报
回复
在csdn最热闹的时候进行的改版把程序员们都改跑了,现在这里好冷清呀!
要想重现往日的繁华不知还要花多长时间:(
layui实现鼠标
移动
到
单元格
上显示数据的方法
如下所示: { field : 'operNm', //title是纯文本 title : '
用户姓名
', width : 150, align : 'center', //下面的是从数据库里取出来的数据 templet:'<
div
>
{{d.year}}
div
>' //判空 /*templet:'<
div
>
{{# if(d.operNm!=un
鼠标经
表格
,提示
单元格
内容 tip
不使用title 属性,使用
移动
div
,展示
表格
中
单元格
内容,可以用在其他地方,很方便。不使用title 属性,使用
移动
div
,展示
表格
中
单元格
内容,可以用在其他地方,很方便
Html Table 转
Div
工具
Html Table 转
Div
工具Html Table 转
Div
工具Html Table 转
Div
工具Html Table 转
Div
工具 带汉化的,不用安装
table转换
div
table转换
div
+css 开发是table+css的话可以用此工具转换成
div
+css
JS拖动选择table里的
单元格
完整实例【基于jQuery】
主要介绍了JS拖动选择table里的
单元格
,结合完整实例形式分析了基于jQuery的table
表格
动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下
ASP
28,409
社区成员
356,971
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章