(function($){ $.fn.fixTable = function(options){ var defaults = { fixColumn: 0, width:0, height:0 }; var opts = $.extend(defaults, options); var _this = $(this); var _clone = _this.clone(); var _columnClone = _this.clone(); var _columnDataClone = _this.clone(); _this.wrap(function() { return $("
"); }); $("#_fixTableMain").css({ "width":defaults["width"], "height":defaults["height"], "overflow":"scroll", "position":"relative" }); $("#_fixTableMain").wrap(function() { return $("
"); }); $("#_fixTableBody").css({ "background-color":"white", "width":defaults["width"], "height":defaults["height"], "overflow":"hidden", "position":"relative" }); $("#_fixTableBody").append("
"); $(_clone).height($(_clone).find("thead").height()); $("#_fixTableHeader").append(_clone); $("#_fixTableHeader").css({ "background-color":"gray", "overflow":"hidden", "width":defaults["width"]-17, "height":_clone.find("thead").find("tr").height()+1, "position":"absolute", "z-index":"88888", "top":"0" }); $("#_fixTableBody").append("
"); var _fixColumnNum = defaults["fixColumn"]; var _fixColumnWidth = 0; $($(_this).find("thead").find("tr").find("th")).each(function(index, element) { if((index+1)<=_fixColumnNum){ _fixColumnWidth += $(this).width()+4; } }); $("#_fixTableColumn").css({ "overflow":"hidden", "width":_fixColumnWidth, "height":defaults["height"]-17, "position":"absolute", "z-index":"99999", "top":"0", "left":"0" }); $("#_fixTableColumn").append("
"); $("#_fixTableColumnHeader").css({ "background-color":"#abc123", "width":$("#_fixTableColumn").width(), "height":_this.find("thead").find("tr").height()+1, "overflow":"hidden", "position":"absolute", "z-index":"999999" }); $("#_fixTableColumnHeader").append(_columnClone); $("#_fixTableColumn").append("
"); $("#_fixTableColumnBody").css({ "background-color":"#acd542", "width":$("#_fixTableColumn").width(), "height":defaults["height"]-17, "overflow":"hidden", "position":"absolute", "z-index":"99999", "top":"0" }); $("#_fixTableColumnBody").append(_columnDataClone); $("#_fixTableMain").scroll(function(e) { $("#_fixTableHeader").scrollLeft($(this).scrollLeft()); $("#_fixTableColumnBody").scrollTop($(this).scrollTop()); }); }; })(jQuery);