导航
  • 全部
...

用 table 的 insertRow() 和 insertCell() 增加表格行时,所在 div 怎么会跳到页面下方去呢?

kypfos 2009-04-23 10:48:06

  1. <button onclick="load()">加载数据</button> 

  2. <div style="width: 600;height:370;overflow: auto;border-width : 1px;border-style : solid;">
  3. <table width="100%" id="dataTable" align="center" border=1 style="border-collapse: collapse">
  4. <tr style="font-weight:bold">
  5. <td>编号</td>
  6. </tr>
  7. <tr style="font-weight:bold">
  8. <td>编号</td>
  9. </tr>
  10. </table>
  11. </div>

  12. <script>

  13. function load(){
  14. for(var i=0;i<100;i++){
  15. newRow = document.getElementById('dataTable').insertRow();

  16. newCell = newRow.insertCell();
  17. newCell.innerText = '编号';
  18. }
  19. }
  20. </script>


上在代码点击 "加载数据" 按钮后,欲向表格中增加行,可以执行后,table 所在的 div 跑到页面下方去了。用上面的代码一执行就能看到这种效果,我所用的浏览器是 IE6。如果把生成的 HTML 代码保存成一个 html 文件,再次打开,其实是正常的。
...全文
给本帖投票
343 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
54powerman 2009-04-23
  • 打赏
  • 举报
回复
的确如此,没想明白。
Yanbin_Q 2009-04-23
  • 打赏
  • 举报
回复
4 楼的正解。
sohighthesky 2009-04-23
  • 打赏
  • 举报
回复
好像是因为tr,td是块元素,把table加个float:left也可以解决
xiaojing7 2009-04-23
  • 打赏
  • 举报
回复
[code=HTML]
<button onclick="load()">加载数据</button> 

<div style="width:600;height:370;overflow: auto;border:1px solid #666;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle">
<table width="100%" id="dataTable" align="center" border=1 style="border-collapse: collapse">
<tr style="font-weight:bold">
<td>编号</td>
</tr>
<tr style="font-weight:bold">
<td>编号</td>
</tr>
</table>
</div>

<script>

function load(){
for(var i=0;i<100;i++){
var newRow = document.getElementById('dataTable').insertRow();

newCell = newRow.insertCell();
newCell.innerText = '编号';
}
}
</script>

[/CODE]
sohighthesky 2009-04-23
  • 打赏
  • 举报
回复
不要overflow: auto;这一句就是好的了
sohighthesky 2009-04-23
  • 打赏
  • 举报
回复
有点意思,IE7也是的
tianshuai32 2009-04-23
  • 打赏
  • 举报
回复
的确如此,没想明白。

87,988

社区成员

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

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

手机看
关注公众号

关注公众号

客服 返回
顶部