网络编程
位置:首页>> 网络编程>> JavaScript>> JavaScript Table行定位效果(2)

JavaScript Table行定位效果(2)

作者:cloudgamer 来源:cloudgamer博客 发布时间:2009-05-25 10:47:00 

标签:JavaScript,表格,定位,table

程序说明

【克隆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比较特别,测试下面的代码:

只要给table设置width(style或本身的width属性),不管设置padding和border是多少,offsetWidth都等于width的值。

经测量offsetWidth是没错的,那就是说是table的width设置的问题。

w3c的table部分中说width属性是the desired width of the entire table,我估计entire就是包含了padding和border,找不到什么其他说明,先这么理解吧。
定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed定位。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com