JavaScript Table行定位效果（3）

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

【克隆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

投稿

JavaScript Table行定位效果（3）

猜你喜欢

Python字典对象实现原理详解

python实现快速文件格式批量转换的方法

一些文档中没有介绍的SQL Server DBCC命令

python去重,一个由dict组成的list的去重示例

ExtJS判断IE浏览器类型的方法

MySQL 那些常见的错误设计规范,你都知道吗

Node.js readline模块与util模块的使用

JS实现json数组排序操作实例分析

Python 3行代码提取音乐高潮部分

python对csv文件追加写入列的方法

使用SQLAlchemy操作数据库表过程解析

vue2.0中set添加属性后视图不能更新的解决办法

Python中sorted()排序与字母大小写的问题

mySQL UNION运算符的默认规则研究

SQL查询排名函数实例

详解通过API管理或定制开发ECS实例

使用Python操作PDF文件

解决mybatis使用char类型字段查询oracle数据库时结果返回null问题

python+PyQT实现系统桌面时钟

.NET之生成数据库全流程实现