标题:怎样用JS在表格之外套嵌一个div层
只看楼主
南橘北枳
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2015-5-27
结帖率:50%
已结贴  问题点数:20 回复次数:8 
怎样用JS在表格之外套嵌一个div层
RT,我想在表格外面加一个div,原本的代码是这样的:
<table id="tdA">
    <tr><td></td></tr>
</table>

希望的效果是这样子的:
<div id="divA">
    <table id="tdA">
        <tr><td></td></tr>
    </table>
</div>

直接写蛮简单的,用JS怎么写呢?
想过用insertBefore(),可效果是这样的:
<div id="divA"></div>
<table id="tdA">
    <tr><td></td></tr>
</table>

灵感从下而来,新人表示代码好多根本看不懂……难道没有简单一些的方法?
<script type="text/javascript" src="http://www.
<script type="text/javascript" src="http://www.
<script type="text/javascript">$(document).ready(function($){$('#tdA').tableScroll({width:600,height:500});});</script>

[ 本帖最后由 南橘北枳 于 2015-5-27 10:54 编辑 ]
搜索更多相关主题的帖子: javascript 
2015-05-27 08:53
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8074
专家分:6657
注 册:2005-11-7
得分:0 
你应该调用divA元素的insertBefore方法,例如这样:document.getEmementById('divA').insertBefore(...)
其实使用appendChild也是需要在divA元素上调用才行
另外其实这样写效率并不高,使用innerHTML方法才是最好也是最常用的
document.getEmementById('divA').innerHTML = '<table id="tdA"><tr><td></td></tr></table>';
这样写,浏览器的执行效率会高很多

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-27 09:54
南橘北枳
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2015-5-27
得分:0 
回复 2楼 冰镇柠檬汁儿
谢谢!
不过看了回复后才发现之前的描述不对,不好意思。
是这样的,div层一开始是不存在的,只有一个table,我想在table之外添加一个div。
可以破么……
2015-05-27 10:59
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8074
专家分:6657
注 册:2005-11-7
得分:0 
第一方案:document.getEmementById('...').innerHTML = '<div id="divA"><table id="tdA"><tr><td></td></tr></table></div>';
第二方案:
var c = document.createElement('div');
c.innerHTML =  '<table id="tdA"><tr><td></td></tr></table>'; // 这里可以使用appendChild等方法插入标签
document.getEmementById('...').appendChild(c);
大概这样就可以

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-27 12:53
jsRank
Rank: 5Rank: 5
等 级:职业侠客
威 望:6
帖 子:69
专家分:303
注 册:2015-5-11
得分:20 
var newDiv = document.createElement('div');                    // 创建新节点
newDiv.id = 'divA';
var oldTable = document.getElementById('tdA');                 // 获取table节点
oldTable.parentNode.insertBefore(newDiv,oldTable.nextSibling); // 新节点加入到文档中,保证table在文档的原来位置上,不会跑到最后面去
newDiv.appendChild(oldTable);                                  // table节点加入到新节点中

[ 本帖最后由 jsRank 于 2015-5-27 23:26 编辑 ]

追求卓越,成功就会跟着你走!
2015-05-27 23:12
南橘北枳
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2015-5-27
得分:0 
回复 5楼 jsRank
棒!棒!哒!
我就是想这么写……奈何……
是因为nextSibling么?
2015-05-28 14:37
南橘北枳
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2015-5-27
得分:0 
回复 4楼 冰镇柠檬汁儿
(づ ̄3 ̄)づ╭❤~辛苦啦~
不过还是不太懂呢……这样和不用JS直接写有区别么?
还有还有,如果table里的表格很多肿么办?
你看5L写的怎么样,是不是很赞(๑•̀ㅂ•́)و✧
2015-05-28 14:45
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8074
专家分:6657
注 册:2005-11-7
得分:0 
呵 呵,随便你了,我只是用惯了innerHTML

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-28 17:23
zhzoli
Rank: 1
等 级:新手上路
帖 子:28
专家分:0
注 册:2005-11-22
得分:0 
学习学校!!!
2015-06-03 09:55



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-445823-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.133260 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved