JavaScript Table行定位效果(2)

if(oT.parentNode != this._oTable){
    nT 
= oT.parentNode.cloneNode(false).appendChild(nT).parentNode;
}


然后再插入到新table中:

if(this._nTable.firstChild){
    
this._nTable.replaceChild(nT, this._nTable.firstChild);
}
else{
    
this._nTable.appendChild(nT);
}


因为程序允许修改克隆的tr,所以会判断有没有插入过,没有就直接appendChild,否则用replaceChild替换原来的tr。


【table的border和frame属性】

table的border属性用来指定边框宽度,table特有的frame属性是用来设置或获取表格周围的边框显示的方式。
说明frame可以是以下值:
void: No sides. This is the default value.
above: The top side only.
below: The bottom side only.
hsides: The top and bottom sides only.
vsides: The right and left sides only.
lhs: The left-hand side only.
rhs: The right-hand side only.
box: All four sides.
border: All four sides.
这些值指明了要显示的边框。要留意的是虽然说void是默认值,但不设置的话其实是一个空值,这时四条边框都会显示。
还有frame对style设置的border没有效果,测试下面代码:


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


这里还可以看到如果同时设置table的border和style的border,那table的border就会失效。

程序中为了更美观会自动去掉新table上面和下面的边框,包括frame和style的:
Code

复制代码 代码如下:


if(this._oTable.border > 0){
switch (this._oTable.frame) {
case "above" :
case "below" :
case "hsides" :
this._nTable.frame = "void"; break;
case "" :
case "border" :
case "box" :
this._nTable.frame = "vsides"; break;
}
}
this._style.borderTopWidth = this._style.borderBottomWidth = 0;



其中空值在设置collapse之后会比较麻烦,在ie6/ie7中测试:

Code


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]



后两个的转换还可以接受,所以在设置frame之前还是判断一下border先。


【获取背景色】

如果td是背景透明的话显然不太美观,最好是找一个合适的颜色来填充。
程序用的方法是,从当前td开始找,如果背景是透明的话,就再从父节点中找,直到找到有背景色为止。
一般来说透明的属性值是"transparent",但在chrome里却是"rgba(0, 0, 0, 0)",所以用了一个属性来保存透明值:

复制代码 代码如下:


this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent";


并在GetBgColor获取背景色程序中使用:

复制代码 代码如下:


while (bgc == this._transparent && (node = node.parentNode) != document) {
bgc = CurrentStyle(node).backgroundColor;
}
return bgc == this._transparent ? "#fff" : bgc;


如果全部都是透明的话就会返回白色(#fff)。
这里没有考虑图片背景的情况,毕竟图片不一定会覆盖整个背景。
【parentNode/offsetParent/parentElement】

上面用到了parentNode,这里顺便说说它跟offsetParent,parentElement的区别。
先看看的说明:
The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a parent. However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null.
很简单,就是节点的父节点,看过dom都知道。

再看看比较容易区分的offsetParent,它在mozilla和msdn都说得比较模糊,在就比较清楚了:
The offsetParent attribute, when called on element A, must return the element determined by the following algorithm:
1,If any of the following holds true return null and stop this algorithm:
A is the root element.
A is the HTML body element.
The computed value of the position property for element A is fixed.
2,If A is an area HTML element which has a map HTML element somewhere in the ancestor chain return the nearest ancestor map HTML element and stop this algorithm.
3,Return the nearest ancestor element of A for which at least one of the following is true and stop this algorithm if such an ancestor is found:
The computed value of the position property is not static.
It is the HTML body element.
The computed value of the position property of A is static and the ancestor is one of the following HTML elements: td, th, or table.
4,Return null.
这里主要有四点:
1,如果是根元素、body元素或元素的position是fixed,将返回null;
2,如果是area元素,会返回最接近的map元素;
3,返回至少符合以下一个条件的最接近该节点的元素:1,元素的position不是static;2,是body元素;3,源元素的position是static,祖先元素中的以下元素:td,th或table。
4,返回null。
其中第三点是最常见的情况,详细可以看下面的测试:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwjsp.html