移动div到表格单元格

Tyro 2000-08-12 10:25:00

加精

页面上有个div，我想把它移动到表格table1的单元格td1上，使div的大小和td1相同，并且恰好覆盖了td1，该怎么做？

最近工作比较忙，没有时间自己研究了，希望能够对所用的方法或属性做点解释，并且有一段源码，最好还要考虑一下有哪些会引起div偏离td1的情况，比如改变了浏览器窗口的大小……

谢谢各位！：）

...全文

281 13 打赏收藏转发到动态举报

写回复

用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