位置：首页>> 网络编程>> JavaScript>> JavaScript Table行定位效果（3）

JavaScript Table行定位效果（3）

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

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

【克隆tr】

table有一个rows集合，包括了table的所有tr（包括thead和tfoot里面的）。
程序的Clone方法会根据其参数克隆对应索引的tr：

this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index));
this._oRow = this._oTable.rows[this._index];
var oT = this._oRow, nT = oT.cloneNode(true);

由于tr可能是包含在thead这些中，所以还要判断一下：

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属性是用来设置或获取表格周围的边框显示的方式。
w3c的tabel的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没有效果，测试下面代码：

<!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 width="100" border="5" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr></table><table width="100" style="border:5px solid #000;" border="10" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr></table></body></html>

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

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

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中测试：

<!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><style type="text/css">.t{width:100px; border-collapse:collapse;}.t td{border:5px solid #999;}</style><table class="t"> <tr> <td>1</td> <td>1</td> </tr></table><br /><table class="t" frame="vsides"> <tr> <td>1</td> <td>1</td> </tr></table><br /><table class="t" border="1"> <tr> <td>1</td> <td>1</td> </tr></table><br /><table class="t" border="1" frame="vsides"> <tr> <td>1</td> <td>1</td> </tr></table></body></html>

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

第一页上一页 1 2

4 5 下一页

投稿

JavaScript Table行定位效果（3）

猜你喜欢