上次做table排序?qū)able有了一些了解，這次更是深入了解了一番，發(fā)現(xiàn)table原來(lái)是這么不簡(jiǎn)單。
還不清楚這個(gè)效果叫什么，就叫行定位吧，本來(lái)想把列定位也做出來(lái)，但暫時(shí)還沒(méi)這個(gè)需求，等以后有時(shí)間再弄吧。
程序原理
一開始的需求只是表頭部分在滾動(dòng)時(shí)能一直固定在頭部，那關(guān)鍵要實(shí)現(xiàn)的就是讓tr能定位。
首先想到的方法是給tr設(shè)置relative，用ie6/7測(cè)試以下代碼：

給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），例如：
Code

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

最后我用的方法是新建一個(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：

要注意雖然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è)置樣式：

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

只要給table設(shè)置width（style或本身的width屬性），不管設(shè)置padding和border是多少，offsetWidth都等于width的值。
經(jīng)測(cè)量offsetWidth是沒(méi)錯(cuò)的，那就是說(shuō)是table的width設(shè)置的問(wèn)題。
w3c的table部分中說(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：

由于tr可能是包含在thead這些中，所以還要判斷一下：

然后再插入到新table中：

因?yàn)槌绦蛟试S修改克隆的tr，所以會(huì)判斷有沒(méi)有插入過(guò)，沒(méi)有就直接appendChild，否則用replaceChild替換原來(lái)的tr。

【table的border和frame屬性】

table的border屬性用來(lái)指定邊框?qū)挾?，table特有的frame屬性是用來(lái)設(shè)置或獲取表格周圍的邊框顯示的方式。
w3c的tabel的frame部分說(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è)試下面代碼：

這里還可以看到如果同時(shí)設(shè)置table的border和style的border，那table的border就會(huì)失效。

程序中為了更美觀會(huì)自動(dòng)去掉新table上面和下面的邊框，包括frame和style的：
Code


其中空值在設(shè)置collapse之后會(huì)比較麻煩，在ie6/ie7中測(cè)試：

Code


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


【獲取背景色】

如果td是背景透明的話顯然不太美觀，最好是找一個(gè)合適的顏色來(lái)填充。
程序用的方法是，從當(dāng)前td開始找，如果背景是透明的話，就再?gòu)母腹?jié)點(diǎn)中找，直到找到有背景色為止。
一般來(lái)說(shuō)透明的屬性值是"transparent"，但在chrome里卻是"rgba(0, 0, 0, 0)"，所以用了一個(gè)屬性來(lái)保存透明值：

并在GetBgColor獲取背景色程序中使用：

如果全部都是透明的話就會(huì)返回白色（#fff）。
這里沒(méi)有考慮圖片背景的情況，畢竟圖片不一定會(huì)覆蓋整個(gè)背景。
【parentNode/offsetParent/parentElement】

上面用到了parentNode，這里順便說(shuō)說(shuō)它跟offsetParent，parentElement的區(qū)別。
先看看parentNode在w3c的說(shuō)明：
The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a parent. However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null.
很簡(jiǎn)單，就是節(jié)點(diǎn)的父節(jié)點(diǎn)，看過(guò)dom都知道。

再看看比較容易區(qū)分的offsetParent，它在mozilla和msdn都說(shuō)得比較模糊，在w3c就比較清楚了：
The offsetParent attribute, when called on element A, must return the element determined by the following algorithm:
1，If any of the following holds true return null and stop this algorithm:
A is the root element.
A is the HTML body element.
The computed value of the position property for element A is fixed.
2，If A is an area HTML element which has a map HTML element somewhere in the ancestor chain return the nearest ancestor map HTML element and stop this algorithm.
3，Return the nearest ancestor element of A for which at least one of the following is true and stop this algorithm if such an ancestor is found:
The computed value of the position property is not static.
It is the HTML body element.
The computed value of the position property of A is static and the ancestor is one of the following HTML elements: td, th, or table.
4，Return null.
這里主要有四點(diǎn)：
1，如果是根元素、body元素或元素的position是fixed，將返回null；
2，如果是area元素，會(huì)返回最接近的map元素；
3，返回至少符合以下一個(gè)條件的最接近該節(jié)點(diǎn)的元素：1，元素的position不是static；2，是body元素；3，源元素的position是static，祖先元素中的以下元素：td，th或table。
4，返回null。
其中第三點(diǎn)是最常見(jiàn)的情況，詳細(xì)可以看下面的測(cè)試：

可見(jiàn)offsetParent跟parentNode的區(qū)別還是很大的。

而parentNode跟parentElement除了前者是w3c標(biāo)準(zhǔn)，后者只ie支持，其他的區(qū)別就不是那么明顯了。
在ie中大部分情況下兩者的效果是一樣的，當(dāng)然如果是一模一樣的話ie就沒(méi)必要弄這么一個(gè)東西出來(lái)了，測(cè)試下面的代碼：

可以看到當(dāng)父節(jié)點(diǎn)的nodeType不是1，即不是element節(jié)點(diǎn)的話，它的parentElement就會(huì)是null。
這就明白了名字中“Element”的含義了。

【設(shè)置td寬度】

接下來(lái)就要設(shè)置td寬度了，要獲取某元素的寬度可以通過(guò)以下方法：
1，支持defaultView的可以直接用getComputedStyle獲取width。
2，獲取offsetWidth，再減去border和padding的寬度。
這個(gè)本來(lái)也可以，但td的border寬度的獲取比較麻煩，下面有更方便的方法。
3，獲取clientWidth，再減去padding的寬度。
這個(gè)跟方法2差不多，但更簡(jiǎn)單方便。

注意ie的currentStyle不像getComputedStyle能獲取準(zhǔn)確值，而只是一個(gè)設(shè)置值，像百分比、auto這些并不會(huì)自動(dòng)轉(zhuǎn)成準(zhǔn)確值，即使是得到準(zhǔn)確值也不一定是實(shí)際值，像td即使設(shè)置一個(gè)很大的準(zhǔn)確值，實(shí)際值也不會(huì)超過(guò)table本身的寬度。
所以在td這種比較特殊的結(jié)構(gòu)中，除非是很理想的狀況，否則用currentStyle基本沒(méi)戲，而且在這個(gè)效果中即使是差了1px也會(huì)看不舒服。
對(duì)于支持defaultView的當(dāng)然可以直接獲取，否則就用上面的方法3來(lái)獲?。?/P>

但這里不管哪個(gè)方法都有一個(gè)問(wèn)題，就是出現(xiàn)scroll的情況，不過(guò)還好td這個(gè)元素即使設(shè)置了overflow為scroll也不會(huì)出現(xiàn)滾動(dòng)條，除了ie8和chrome。
程序沒(méi)對(duì)這個(gè)情況做處理，畢竟給td設(shè)scroll也不常見(jiàn)，而且支持這個(gè)的瀏覽器不多，沒(méi)必要花太多時(shí)間在這里。
ps：關(guān)于td寬度的自動(dòng)調(diào)整可以參考w3c的table-layout部分。

如果有影響原td結(jié)構(gòu)的設(shè)置，例如colspan之類的就要留意，錯(cuò)誤的結(jié)構(gòu)很可能導(dǎo)致一些異常變形。
如果對(duì)原表格結(jié)構(gòu)或內(nèi)容做了修改，應(yīng)該執(zhí)行一次Clone方法重構(gòu)新table。
本部分對(duì)體驗(yàn)比較重要，如果設(shè)置不當(dāng)就會(huì)有變形的感覺(jué)，很不美觀。

【borderCollapse】

上面說(shuō)到td的border寬度的獲取比較麻煩，那到底有多煩呢？
如果只是一般情況的話，通過(guò)borderLeftWidth和borderRightWidth獲取寬度就可以了。
ps：如果borderStyle是"none"的話，那么border就會(huì)沒(méi)效，所以如果要取border寬度的話最好先判斷一下borderStyle是不是"none"。

但table有一個(gè)特別的樣式borderCollapse，設(shè)置table的邊框模型。
它有兩個(gè)值，分別是separate（分開，默認(rèn)值）和collapse（合并）。
separate就是我們一般看到的效果，這里主要討論collapse，先看mozilla怎么說(shuō)的：
In the collapsed border model, adjacent table cells share borders.
意思是在collapse border模型中，相鄰的td會(huì)共用邊框?？聪旅娴睦訒?huì)更明白：

可以看到使用collapse之后，相鄰td的邊框都合并成一條而且是以相鄰邊框中寬度較大的那條為準(zhǔn)。
那td跟table之間呢，參考下面的例子：

可見(jiàn)table和td之間也是遵從同樣規(guī)則。
還有的是當(dāng)設(shè)置了collapse那cellspacing就無(wú)效了。順便說(shuō)說(shuō)border-spacing，它其實(shí)就是cellspacing在css中的樣式形式，只是ie在ie8才開始支持，詳細(xì)可以看mozilla的說(shuō)明。

collapse的一個(gè)常見(jiàn)應(yīng)用是做邊框表格，例如1px邊框的表格：

前者用的collapse，后者是用table背景色模擬，雖然效果都一樣，但前者顯然較好，才是真正的“邊框”。

在使用了collapse之后，要寫一個(gè)通用的獲取邊框?qū)挾瘸绦驎?huì)變得十分麻煩，而且有些情況下甚至沒(méi)辦法判斷獲取。
詳細(xì)情況這里就不細(xì)說(shuō)了，有興趣研究的話可以看看w3c的The collapsing border model，當(dāng)然要想全部了解的話還要在各個(gè)瀏覽器中研究。

【元素位置】

table的樣式設(shè)置好后，還需要獲取原table和原tr的位置參數(shù)，為后面的元素定位做準(zhǔn)備。
要獲取某個(gè)元素相對(duì)文檔的位置，傳統(tǒng)的做法是獲取對(duì)象的offsetLeft/offsetTop，然后不斷獲取offsetParent的offsetLeft/offsetTop，直到找不到offsetParent為止。
得到的結(jié)果就是相對(duì)文檔的位置了，上面已經(jīng)介紹過(guò)offsetParent，原理應(yīng)該都明白了吧。
程序的SetRect設(shè)置區(qū)域?qū)傩苑椒ㄖ幸彩褂昧诉@個(gè)思路：

不過(guò)這里介紹一個(gè)更好的方法，通過(guò)getBoundingClientRect方法來(lái)獲取。
在mozilla是這么說(shuō)明的：
The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport...
返回一個(gè)TextRectangle對(duì)象，包含left, top, right和bottom幾個(gè)只讀屬性，以px為單位來(lái)表示邊界框相對(duì)視窗左上角的位置。（偶英文爛啊）
注意是相對(duì)視窗，不是文檔哦，如果要相對(duì)文檔還必須加上scrollLeft/scrollTop。
通過(guò)下面的測(cè)試可以看到兩個(gè)方法返回的結(jié)果都是相同的：

程序中如果支持getBoundingClientRect就會(huì)用它來(lái)獲取位置參數(shù)：

顯然用getBoundingClientRect更方便快捷。
這個(gè)方法雖然是ie的產(chǎn)物，但已經(jīng)是w3c的標(biāo)準(zhǔn)，而且ff3和Opera都已經(jīng)支持了這個(gè)方法，基本可以放心使用，除了chrome。
這里只是簡(jiǎn)單介紹，想了解更多可以看w3c的View Module部分。

獲取原table和tr的位置后，還需要計(jì)算新table的位置。
程序可以自定義新table位于視窗位置的百分比，例如頂部是0，中間是0.5，底部是1，可以在程序初始化時(shí)或用SetPos方法來(lái)設(shè)置。
這里主要獲取視窗高度和新table在視窗的top值：

定位范圍實(shí)際上是從視框頂部到視框高度減去新table高度的范圍內(nèi)的，所以計(jì)算時(shí)要先把視窗高度減去新table的高度。

【元素定位】

萬(wàn)事俱備，只欠定位了。
由于要根據(jù)窗口滾動(dòng)狀態(tài)來(lái)判斷計(jì)算定位，scrollTop/scrollLeft的獲取必不可少。
但在chrome中就算用了DOCTYPE，也要用document.body來(lái)獲取scrollTop/scrollLeft，盡管它確實(shí)有document.documentElement。
對(duì)chrome了解不多，也不知哪里能查它的相關(guān)文檔，程序里就直接做個(gè)判斷算了：

定位的第一步就是判斷是否需要定位，這里的判斷標(biāo)準(zhǔn)有兩個(gè)，第一個(gè)是原tr是否超過(guò)了視窗范圍，還有是新table要顯示的位置是否在原table的顯示范圍內(nèi)。
第一點(diǎn)可以通過(guò)原tr位置的頂部和底部是否超過(guò)視窗的頂部和底部來(lái)判斷：

在看第二點(diǎn)之前先看看程序中的Auto屬性，它是用來(lái)指定否自動(dòng)定位的。
如果自動(dòng)定位的話當(dāng)原tr離開視框頂部新table就會(huì)定位到視框頂部，原tr離開底部新table就會(huì)定位到視框底部，這樣看上去會(huì)比較自然順暢。
如果不選擇自動(dòng)的話就會(huì)根據(jù)SetPos方法中計(jì)算得到的新table視窗top值來(lái)設(shè)置定位：

接著就判斷新table要顯示的位置是否在原table的顯示范圍內(nèi)，這個(gè)可以通過(guò)新table位置的頂部和底部是否超過(guò)原table的頂部和底部來(lái)判斷：

當(dāng)符合所有的條件就可以進(jìn)行定位了，如果是fixed定位的就使用相對(duì)視窗的top值：

像ie6是absolute定位的就要使用相對(duì)文檔的top值：

考慮到左右滾動(dòng)的情況，left也必須設(shè)置。

當(dāng)然不符合條件就會(huì)隱藏新table，程序中給top設(shè)置一個(gè)很大的負(fù)值來(lái)間接“隱藏”它。
用負(fù)值是因?yàn)檫@樣不會(huì)把ie6的頁(yè)面拉長(zhǎng)，不用display是因?yàn)樯厦嫘枰@取它的offsetHeight，如果用display隱藏就獲取不了啦。

最后把Run程序綁定到window的scroll事件中就可以了，而window在resize時(shí)視框高度會(huì)發(fā)生變化，所以resize事件要綁定SetPos程序。

【覆蓋select】

只要用到了定位，就不得不面對(duì)一個(gè)老對(duì)手“ie6的select”。
我在之前的文章也介紹過(guò)一些解決方法（參考這里的覆蓋select），這里不能直接隱藏select，那看來(lái)只能用iframe了。
但用iframe有一個(gè)很大的問(wèn)題，在ie6測(cè)試下面的代碼，并拖動(dòng)滾動(dòng)條：

可以看到，即使是iframe，在拖動(dòng)滾動(dòng)條的時(shí)候，select仍然在后面閃啊閃，在本程序中這個(gè)現(xiàn)象會(huì)尤其明顯。
看來(lái)還得用隱藏select的方法，最好的做法是只隱藏在新table后面的select，而不影響其他select的正常顯示。
那關(guān)鍵就是如何判斷select是否在新table后面，這個(gè)可以通過(guò)位置坐標(biāo)判斷，剛好可以用到上面的getBoundingClientRect。
一般的思路是判斷新table和select的坐標(biāo)，根據(jù)位置判斷select的顯示和隱藏。
但如果有多個(gè)實(shí)例，可能會(huì)導(dǎo)致select在一個(gè)實(shí)例中要隱藏，卻在另一個(gè)要顯示的情況。

為了解決沖突，程序給select加了一個(gè)_count屬性作為計(jì)數(shù)器，用來(lái)記錄有多少實(shí)例把該select隱藏了。
如果當(dāng)前實(shí)例判斷該select要隱藏，就給其_count加1，隱藏后存放到實(shí)例的_selects集合中。
在恢復(fù)顯示_selects中的select時(shí)，先給select的_count減1，如果得到的_count是0，那說(shuō)明沒(méi)有其他實(shí)例要隱藏它，就可以設(shè)置顯示了，最后清空_selects集合。
在判斷是否隱藏select前還必須恢復(fù)一次該實(shí)例_selects里面的select，否則就會(huì)造成_count只加不減的情況。

程序中的SetSelect方法就是用來(lái)判斷和設(shè)置select的：

其中ResetSelect方法是用來(lái)恢復(fù)顯示select的：


但這個(gè)方法在快速滾屏?xí)r還是無(wú)能為力，而且select越多效率也隨之下降，各位有更好方法的話歡迎交流。

【Chrome一個(gè)bug】

在測(cè)試的時(shí)候發(fā)現(xiàn)Chrome一個(gè)bug，測(cè)試下面代碼：

一個(gè)毫不相干的操作居然令table沒(méi)有自動(dòng)撐開，加上前面的問(wèn)題，看來(lái)Chrome的路還很長(zhǎng)啊。

使用說(shuō)明

實(shí)例化一個(gè)TableFixed對(duì)象只需要一個(gè)參數(shù)table的id：

實(shí)例化時(shí)有4個(gè)可選屬性：
Index: 0,//tr索引
Auto: true,//是否自動(dòng)定位
Pos: 0,//自定義定位位置百分比(0到1)
Hide: false//是否隱藏（不顯示）

其中Index和Pos在實(shí)例化之后就不能使用。
要修改克隆行可以用Clone方法，其參數(shù)是要克隆tr的索引。
要修改自定義定位位置可以用SetPos方法，其參數(shù)是要定位的位置百分比。

具體使用請(qǐng)參考實(shí)例。

程序源碼

下載完成測(cè)試代碼
轉(zhuǎn)載請(qǐng)注明出處：http://www.cnblogs.com/cloudgamer/