您好,匿名用户
随意问技术百科期待您的加入

怎么用js来clone HTML table 中的一部分

0 投票

我的页面上有一个表格,表格本身设置了一些属性(例如width等) 以及css样式,表格有上千行,
我想提取表格的其中某些行,放到一个新表格中,要求样式和属性与原表格一致,有没有好的办法?

更新解决方案:
如下,目的是 从tb1中提取某些行放到一个新的table中,要求样式完全一致。
由于实际表格行数比较多,直接使用innerHTML拷贝表格会比较慢, 因此不会采取innerHTML的方式。

<html>
<head>
<style type="text/css">
#tb1{
  font-weight:bold; /*test style*/
}
</style>
</head>
<body>
<table id="tb1" >
<tr>
<td>TD1</td><td>TD2</td>
</tr>
<tr>
<td>TD3</td><td>TD4</td>
</tr>
</table>

<script type="text/javascript">
var tb1 = document.getElementById('tb1');

//仅克隆table标签本身,不包含子元素,这样可以保留tb1的样式,但不必复制其全部子节点
var tb2 = tb1.cloneNode(false);
document.body.appendChild(tb2);

var trs = tb1.getElementsByTagName('tr');
for(var i=0,len=trs.length; i < len; i++) { //选取特定的行,这里简化为遍历所有行
	tb2.appendChild(trs[i].cloneNode(true));  //克隆选定的行到新table
}

</script>
</body>
</html>
用户头像 提问 2013年 12月20日 @ Trish 上等兵 (154 威望)
分享到:

1个回答

0 投票
 
最佳答案

不懂什么叫表格的子集,你可以说表格的行、列、单元格,可子集是什么,tbody

那你就提取那些行:

var table = document.getElementByTagName("table")[0];

var trs = table.getElementByTagName("tr");

for (var i = 0, l = trs.length; i < l; i++) {
    // 干吧,提取之;
} 
用户头像 回复 2013年 12月20日 @ Cho'Gath 上等兵 (267 威望)
选中 2013年 9月7日 @Trish
提一个问题:

相关问题

0 投票
1 回复 36 阅读
0 投票
1 回复 31 阅读
0 投票
1 回复 95 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...