Jquery外掛程式 — 表格固定表頭

Table固定表頭是老生常談的東西，從網上看了很多人的實現，但都不夠滿意，很多原因，比如說效果根本就沒實現，要不就是易用性很差，於是自己試著寫了一個Jquery固定表頭的外掛程式，與各位共用，此外掛程式還在測試階段，如果想要直接使用請各位根據自己項目微調。

實現原理圖：

 

針對原理圖的說明：

         所有的行（tr）可分為表頭和表體兩部分，把表格拆分為兩個表格，第一個表格放表頭，第二個表格放表體，我們要拖動的是表體，所以把第二個表格再用一層div封裝起來，目的是為了Scroll，之後整體再用一層大的div包裹起來，看上去就成了一個完整的表格，其實成型的效果是有2個div，2個table組裝而成的，而原來的那個表格根本就沒用了，直接刪除掉就OK了。

Jquery外掛程式代碼：

//+---------------------------------------------------//| jQuery外掛程式:表頭固定 （還需測試）//| author：阿明//+--------------------------------------------------- (function ($) {    $.fn.extend({        ScrollTable: function (options) {            var defaults = {                MaxHeight: 120,                MaxDataItemIndex: 1 // 固定前MaxDataItemIndex作為固定表頭            };            options = $.extend(defaults, options);            return this.each(function () {                var $this = $(this);                // 產生表頭部分和身體部分                var $cloneTableHeader = $this.clone();                var $cloneTableBody = $this.clone();                $cloneTableHeader.find("tr").filter(function (index) { return index >= options.MaxDataItemIndex }).remove();                $cloneTableBody.find("tr").filter(function (index) { return index < options.MaxDataItemIndex }).remove();                // 將產生的表頭和身體部分放入Container，並做一些微調                $this.after("<div class='ScrollTableContainer' style='border:1px solid;'></div>");                $this.next().append($cloneTableHeader);                $this.next().append("<div class='ScrollDiv' style='overflow-y:scroll;'></div>");                $this.next().css("width", $this.width() + 20);                $this.next().find("div.ScrollDiv").css({                    "max-height": options.MaxHeight,                    "width": $this.width() + 20,                    "margin-top": -2                });                $this.next().find("div.ScrollDiv").append($cloneTableBody);                $this.remove();            });        }    });})(jQuery);