|
【克隆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先。
出处：蓝色理想
责任编辑：bluehearts
上一页 JavaScript Table行定位效果 [2] 下一页 JavaScript Table行定位效果 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 3 页 JavaScript Table行定位效果 [3]
