jQuery實作當機表頭(IE6,7,8測試通過)

段時間做項目時候由于需要顯示一個清單，但是由于資料太多在滾動的時候表頭必須當機住，是以就寫了下面這個腳本（曾經在網上也找過相應的腳本，但是不怎麼理想是以就自己寫了，但是目前由于項目僅僅用到了表頭的當機，而不需要指定列當機是以目前隻能算個不完整的腳本，不過一般的僅僅需要表頭當機就可以使用了），現在先看看截圖：

這樣實作了表頭的當機，下面表體内容可以自由滾動

看下代碼：

//為jquery擴充一個CloneTableHeader 方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<code>jQuery.fn.CloneTableHeader =</code><code>function</code><code>(tableId, tableParentDivId) {</code>

<code>    </code><code>//擷取當機表頭所在的DIV,如果DIV已存在則移除</code>

<code>    </code><code>var</code> <code>obj = document.getElementById(</code><code>"tableHeaderDiv"</code> <code>+ tableId);</code>

<code>    </code><code>if</code> <code>(obj) {</code>

<code>         </code><code>jQuery(obj).remove();</code>

<code>    </code><code>}</code>

<code>    </code><code>var</code> <code>browserName = navigator.appName;</code><code>//擷取浏覽器資訊,用于後面代碼區分浏覽器</code>

<code>    </code><code>var</code> <code>ver = navigator.appVersion;</code>

<code>    </code><code>var</code> <code>browserVersion = parseFloat(ver.substring(ver.indexOf(</code><code>"MSIE"</code><code>) + 5, ver.lastIndexOf(</code><code>"Windows"</code><code>)));</code>

<code>    </code><code>var</code> <code>content = document.getElementById(tableParentDivId);</code>

<code>    </code><code>var</code> <code>scrollWidth = content.offsetWidth - content.clientWidth;</code>

<code>    </code><code>var</code> <code>tableOrg = jQuery(</code><code>"#"</code> <code>+ tableId);</code><code>//擷取表内容</code>

<code>    </code><code>var</code> <code>table = tableOrg.clone();</code><code>//克隆表内容</code>

<code>    </code><code>table.attr(</code><code>"id"</code><code>,</code><code>"cloneTable"</code><code>);</code>

<code>    </code><code>//注意:需要将要當機的表頭放入thead中</code>

<code>    </code><code>var</code> <code>tableHeader = jQuery(tableOrg).find(</code><code>"thead"</code><code>);</code>

<code>    </code><code>var</code> <code>tableHeaderHeight = tableHeader.height();</code>

<code>    </code><code>tableHeader.hide();</code>

<code>    </code><code>var</code> <code>colsWidths = jQuery(tableOrg).find(</code><code>"tbody tr:first td"</code><code>).map(</code><code>function</code><code>() {</code>

<code>        </code><code>return</code> <code>jQuery(</code><code>this</code><code>).width();</code>

<code>    </code><code>});</code><code>//動态擷取每一列的寬度</code>

<code>    </code><code>var</code> <code>tableCloneCols = jQuery(table).find(</code><code>"thead tr:first td"</code><code>)</code>

<code>    </code><code>if</code> <code>(colsWidths.size() &gt; 0) {</code><code>//根據浏覽器為當機的表頭寬度指派(主要是區分IE8)</code>

<code>        </code><code>for</code> <code>(i = 0; i &lt; tableCloneCols.size(); i++) {</code>

<code>            </code><code>if</code> <code>(i == tableCloneCols.size() - 1) {</code>

<code>                </code><code>if</code> <code>(browserVersion == 8.0)</code>

<code>                    </code><code>tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth);</code>

<code>                </code><code>else</code>

<code>                    </code><code>tableCloneCols.eq(i).width(colsWidths[i]);</code>

<code>            </code><code>}</code><code>else</code> <code>{</code>

<code>                </code><code>tableCloneCols.eq(i).width(colsWidths[i]);</code>

<code>            </code><code>}</code>

<code>        </code><code>}</code>

<code>    </code><code>//建立當機表頭的DIV容器,并設定屬性</code>

<code>    </code><code>var</code> <code>headerDiv = document.createElement(</code><code>"div"</code><code>);</code>

<code>    </code><code>headerDiv.appendChild(table[0]);</code>

<code>    </code><code>jQuery(headerDiv).css(</code><code>"height"</code><code>, tableHeaderHeight);</code>

<code>    </code><code>jQuery(headerDiv).css(</code><code>"overflow"</code><code>,</code><code>"hidden"</code><code>);</code>

<code>    </code><code>jQuery(headerDiv).css(</code><code>"z-index"</code><code>,</code><code>"20"</code><code>);</code>

<code>    </code><code>jQuery(headerDiv).css(</code><code>"width"</code><code>,</code><code>"100%"</code><code>);</code>

<code>    </code><code>jQuery(headerDiv).attr(</code><code>"id"</code><code>,</code><code>"tableHeaderDiv"</code> <code>+ tableId);</code>

<code>    </code><code>jQuery(headerDiv).insertBefore(tableOrg.parent());</code>

<code>}</code>

以上就是完整代碼，現在看下如何使用:

隻需在頁面中加入以下腳本

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>       </code><code>jQuery(</code><code>function</code><code>() {</code>

<code>           </code><code>jQuery.fn.CloneTableHeader(</code><code>"tab1"</code><code>,</code><code>"div1"</code><code>);</code>

<code>       </code><code>});</code>

<code>   </code><code>&lt;/script&gt;</code>

這樣就可以了,傳入表和表所在的DIV的ID就OK了,必須注意的是:要當機的表頭必須放入到thead中,否則無法實作當機。

以上代碼在IE6,7,8測試通過，FF和chrome會出現表頭的寬度不準确的問題。

PS:大家如果覺得好幫忙點下推薦，謝謝大家了！

本文轉自kyo-yo部落格園部落格，原文連結：http://www.cnblogs.com/kyo-yo/archive/2010/05/18/jquery-clone-table-header.html，如需轉載請自行聯系原作者