gistfile1.js

// +---------------------------------------------+
// | jQuery plugin scrollTable                   |
// +---------------------------------------------+
// | @author: Juarez Gonçalves Nery Junior       |
// | @email: juareznjunior@gmail.com             |
// +---------------------------------------------+
// | <div id="myScroll">                         |
// |  <table>(..)</table>                        |
// | </div>                                      |
// | $('div#myScroll').scrollTable({height:200}) |
// +---------------------------------------------+
;(function($){
	$.fn.scrollTable = function(options){
		var options = $.extend({},options);
		// options
		// height = int
		// onComplete = function(){}
		return this.each(function(){
			var $self = $(this),selfDOM = this;

			if (!$self.hasClass('hasGrid')) {
				var $TABLE = $self.find('table').width('100%');
				
				if (0 == $TABLE.length) {
					return;
				}
				
				$self.addClass('hasGrid').width('100%');

				var divHeader = document.createElement('div'),divFooter = document.createElement('div');

				$(divHeader).addClass('divHeader').width('100%').append('<table><thead></thead></table>').insertBefore(selfDOM);
				
				var attrTable = {
					cellSpacing: $TABLE.get(0).cellSpacing||'',
					cellPadding: $TABLE.get(0).cellPadding||''
				};
				
				var $TABLE_THEAD = $TABLE.find('thead'),$TABLE_TFOOT = $TABLE.find('tfoot');

				var $TABLE_FOOTER_TFOOT = null;
				
				if ($TABLE_TFOOT.length) {
					
					$(divFooter).addClass('divFooter').width('100%').append('<table><tfoot></tfoot></table>').insertAfter(selfDOM);
					var $divFooter = $(divFooter);
					$TABLE_FOOTER_TFOOT = $divFooter.find('table').attr(attrTable).css({width:'100%'}).find('tfoot');
				}
				
				var $divHeader = $(divHeader);
				var cpt = $('caption',$TABLE[0]);
				var $TABLE_HEADER_THEAD = $divHeader.find('table').map(function(){
					return ((cpt.length) ? $(this).append(cpt).get() : this);
				}).attr(attrTable).css({width:'100%'}).find('thead');
				
				var create = function(hf) {
					var $elem = (hf=='header') ? $TABLE_THEAD : $TABLE_TFOOT
						,$append = (hf=='header') ? $TABLE_HEADER_THEAD : $TABLE_FOOTER_TFOOT
						,$tr = $elem.find('tr');
					if ($tr.length) {
						$tr.each(function(){
							var selfTR = this;
							var tr = document.createElement('tr'),th = document.createElement('th');
							
							$(th).addClass('thScroll').css('width',12).appendTo(selfTR);
								
							$(selfTR).find('th').each(function(){
								var selfTH = this;
								var css = {
									width : $(selfTH).width(),
									backgroundColor : $(selfTH).css('backgroundColor')
								},
								attr = {
									rowSpan: selfTH.rowSpan,
									colSpan: selfTH.colSpan
								};
								
								$(selfTH).clone(true).css(css).attr(attr).appendTo(tr);
								
							});
							
							$(tr).appendTo($append);
						});

						if (!$.browser.msie) {
							$TABLE_THEAD.find('.thScroll').remove();
							$TABLE_TFOOT.find('.thScroll').remove();
						}
						
						if (hf=='footer') {
							$TABLE_TFOOT.css('visibility',(($.browser.msie) ? 'hidden' : 'collapse' )).find('.thScroll').remove();
						}
					}
				};
				
				create('header');
				create('footer');
								
				$self.css({
					height: ('undefined' == typeof options.height) ? 200 : options.height,
					overflowY: 'scroll',overflowX: 'hidden'
				});

				$divHeader.css({width:$self.width()});
				
				var marginTop = 0;
				$TABLE_THEAD.each(function(){
					marginTop += parseInt($(this).height())
				});
				
				$TABLE.css({marginTop: parseInt(marginTop+ 2)*(-1)});

				if ($.isFunction(options.onComplete)) {
					// @param div selector $('#myDiv').scrollTable(); DOM
					// @param div select > table - original table DOM
					// @param div selector > div.divHeader DOM
					// @param div selector > div.divFooter DOM
					var _tfoot = ('null' === $TABLE_FOOTER_TFOOT) ? $TABLE_FOOTER_TFOOT.parent().get(0) : null;
					options.onComplete.call(selfDOM,$TABLE.get(0),$TABLE_HEADER_THEAD.parent().get(0),_tfoot);
				}
			};
		});
	};
})(jQuery);