|
【克隆tr】
table有一個(gè)rows集合，包括了table的所有tr（包括thead和tfoot里面的）。
程序的Clone方法會(huì)根據(jù)其參數(shù)克隆對(duì)應(yīng)索引的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);
}
因?yàn)槌绦蛟试S修改克隆的tr，所以會(huì)判斷有沒有插入過，沒有就直接appendChild，否則用replaceChild替換原來的tr。
【table的border和frame屬性】
table的border屬性用來指定邊框?qū)挾龋瑃able特有的frame屬性是用來設(shè)置或獲取表格周圍的邊框顯示的方式。
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是默認(rèn)值，但不設(shè)置的話其實(shí)是一個(gè)空值，這時(shí)四條邊框都會(huì)顯示。
還有frame對(duì)style設(shè)置的border沒有效果，測(cè)試下面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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>
這里還可以看到如果同時(shí)設(shè)置table的border和style的border，那table的border就會(huì)失效。
程序中為了更美觀會(huì)自動(dòng)去掉新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;
其中空值在設(shè)置collapse之后會(huì)比較麻煩，在ie6/ie7中測(cè)試：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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>
后兩個(gè)的轉(zhuǎn)換還可以接受，所以在設(shè)置frame之前還是判斷一下border先。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript Table行定位效果 [2] 下一頁 JavaScript Table行定位效果 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 JavaScript Table行定位效果 [3]
