人人爽人人爽人人爽,久久成人免费精品网站,久久综合亚

JavaScript Table行定位效果（一）

原創(chuàng)|其它|編輯：郝浩|2009-05-20 10:13:09.000|閱讀 829 次

概述：近來(lái)有客戶要求用table顯示一大串?dāng)?shù)據(jù)，由于滾動(dòng)后就看不到表頭，很不方便，所以想到這個(gè)效果。上次做table排序?qū)able有了一些了解，這次更是深入了解了一番，發(fā)現(xiàn)table原來(lái)是這么不簡(jiǎn)單。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

近來(lái)有客戶要求用table顯示一大串?dāng)?shù)據(jù)，由于滾動(dòng)后就看不到表頭，很不方便，所以想到這個(gè)效果。
上次做對(duì)table有了一些了解，這次更是深入了解了一番，發(fā)現(xiàn)table原來(lái)是這么不簡(jiǎn)單。
還不清楚這個(gè)效果叫什么，有點(diǎn)像表頭固定的效果，就叫行定位吧，本來(lái)想把列定位也做出來(lái)，但暫時(shí)還沒(méi)這個(gè)需求，等以后有時(shí)間再弄吧。
如果只是做一個(gè)效果也不難，但要做一個(gè)通用的，無(wú)侵入的就要考慮很多東西了。

效果預(yù)覽

為方便預(yù)覽，建議縮小瀏覽器。

1	表頭

1	表頭
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17	表尾

點(diǎn)擊行選擇克隆行：當(dāng)前克隆第 1 行

程序原理

一開始的需求只是表頭部分在滾動(dòng)時(shí)能一直固定在頭部，那關(guān)鍵要實(shí)現(xiàn)的就是讓tr能定位。
首先想到的方法是給tr設(shè)置relative，用ie6/7測(cè)試以下代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<table cellpadding="5" cellspacing="0" border="1" width="100">
    <tr style="position:relative; left:100px;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

給tr設(shè)置relative后就能相對(duì)table定位了，看來(lái)很簡(jiǎn)單啊，但問(wèn)題是這個(gè)方法ie8和ff都無(wú)效，而且存在很多問(wèn)題，所以很快就被拋棄了。
ps：該效果用來(lái)做tr的拖動(dòng)會(huì)很方便。

接著想到的是給table插入一個(gè)新tr，克隆原來(lái)的tr，并設(shè)置這個(gè)tr為fixed（ie6為absolute），例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<table cellpadding="5" cellspacing="0" border="1" width="100">
    <tr style="position:fixed; left:100px;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr style="position:absolute; left:200px;">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

第一個(gè)問(wèn)題是fixed的tr在ie7中不能進(jìn)行定位，而且td在定位后并不能保持在表格中的布局，這樣在原表格插tr就沒(méi)意義了。
ps：fixed的相關(guān)應(yīng)用可參考。

最后我用的方法是新建一個(gè)table，并把源tr克隆到新table中，然后通過(guò)對(duì)新table定位來(lái)實(shí)現(xiàn)效果。
用這個(gè)方法關(guān)鍵有兩點(diǎn)，首先要做一個(gè)仿真度盡可能高的tr，還有是要準(zhǔn)確的定位，這些請(qǐng)看后面的程序說(shuō)明。

程序說(shuō)明

【克隆table】

克隆一個(gè)元素用cloneNode就可以了，它有一個(gè)bool參數(shù)，表示克隆是否包含子節(jié)點(diǎn)。
程序第一步就是克隆原table：

this._oTable = $(table);//源table
this._nTable = this._oTable.cloneNode(false);//新table
this._nTable.id = "";//避免id沖突

要注意雖然ie的cloneNode參數(shù)是可選的（默認(rèn)是false），但在ff是必須的，建議使用時(shí)都寫上參數(shù)。
還要注意的是id屬性也會(huì)被克隆，也就是克隆后會(huì)有兩個(gè)相同id的元素（如果克隆對(duì)象有設(shè)置的話），這很容易會(huì)導(dǎo)致其他問(wèn)題，程序會(huì)把克隆table的id屬性設(shè)空。
ps：table請(qǐng)用class來(lái)綁定樣式，用id的話新table就獲取不了樣式了。

克隆之后再設(shè)置樣式：

this._style.width = this._oTable.offsetWidth + "px";
this._style.position = isIE6 ? "absolute" : "fixed";
this._style.zIndex = 100;

一般來(lái)說(shuō)offsetWidth是width+padding+border的結(jié)果，但table比較特別，測(cè)試下面的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<table border="5" id="t" style="padding:10px; width:100px;">
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
</table>
<table width="100" id="t2" style="border:10px solid #000;">
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
</table>
<script>
alert(document.getElementById("t").offsetWidth);
alert(document.getElementById("t2").offsetWidth);
</script>
</body>
</html>

只要給table設(shè)置width（style或本身的width屬性），不管設(shè)置padding和border是多少，offsetWidth都等于width的值。
經(jīng)測(cè)量offsetWidth是沒(méi)錯(cuò)的，那就是說(shuō)是table的width設(shè)置的問(wèn)題。
中說(shuō)width屬性是the desired width of the entire table，我估計(jì)entire就是包含了padding和border，找不到什么其他說(shuō)明，先這么理解吧。
定位方面，除了不支持fixed的ie6用absolute，其他都使用fixed定位。

【克隆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ì)判斷有沒(méi)有插入過(guò)，沒(méi)有就直接appendChild，否則用replaceChild替換原來(lái)的tr。

【table的border和frame屬性】

table的border屬性用來(lái)指定邊框?qū)挾龋瑃able特有的frame屬性是用來(lái)設(shè)置或獲取表格周圍的邊框顯示的方式。
說(shuō)明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.
這些值指明了要顯示的邊框。要留意的是雖然說(shuō)void是默認(rèn)值，但不設(shè)置的話其實(shí)是一個(gè)空值，這時(shí)四條邊框都會(huì)顯示。
還有frame對(duì)style設(shè)置的border沒(méi)有效果，測(cè)試下面代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//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>

這里還可以看到如果同時(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" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//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>

后兩個(gè)的轉(zhuǎn)換還可以接受，所以在設(shè)置frame之前還是判斷一下border先。

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：博客園

上一篇：JavaScript Table行定位效果（二）下一篇：利用虛擬硬盤（把內(nèi)存當(dāng)作硬盤）來(lái)提高數(shù)據(jù)庫(kù)的效率