IE中JS cloneNode的问题,是不是一个bug呢?

wctmzmmf 2008-04-20 06:46:53
问题是:cloneNode复制节点后,特别是复制了<select />后,原来选中的数字3,但是经过复制再添加后,所有后来添加上的项选中的都是1了。但是这种问题只有在IE下存在,FF下就不存在。

不知道这算不算IE的一个Bug? clone的时候属性丢失了!

先看现在的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<script type="text/javascript">
function test()
{
var oDiv = document.body.childNodes[0];
var oCopy = oDiv.cloneNode(true);
//alert(document.body.childNodes[0].nodeName);
document.getElementById("s").appendChild(oCopy);

}
</script>
</head>
<body><div>
<label for="isCheck">选中</label><input type="checkbox" checked="checked" id="isCheck" name="isCheck" />
<label for="index">序号</label><select id="incex" name="index">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<input type="button" value="测试" onclick="test()" />
<div id="s"></div>
</body>
</html>
...全文
118 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
willko 2008-04-20
  • 打赏
  • 举报
回复
IE可以这样复制。。

var oCopy = oDiv.cloneNode(false);
oCopy.innerHTML = oDiv.innerHTML;
document.getElementById("s").appendChild(oCopy);
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code 1 2 3 4 给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7不能进行定位,而且td在定位后并不能保持在表格的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code

87,904

社区成员

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

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