程序说明
【克隆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比较特别,测试下面的代码:
<!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"> <body> <table border="5" id="t" style="padding:10px; width:100px;"> <tr> <td>1</td> <td>1</td> </tr> </table> <table width="100" id="t2" style="border:10px solid #000;"> <tr> <td>1</td> <td>1</td> </tr> </table> <script> alert(document.getElementById("t").offsetWidth); alert(document.getElementById("t2").offsetWidth); </script> </body> </html>
只要给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定位。
出处:蓝色理想
责任编辑:bluehearts
上一页 JavaScript Table行定位效果 [1] 下一页 JavaScript Table行定位效果 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|