JavaScript教程:Table行定位效果(2)

http://www.itjxue.com  2015-08-06 23:10  来源:未知  点击次数: 

程序说明

【克隆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定位。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章