2. 程式人生 > >jQuery實現表格凍結行和列

jQuery實現表格凍結行和列

阿新 • • 發佈：2019-01-20

前幾天，遇到一個需求是要將表格的前幾行和前幾列凍結即固定，就是在有滾動條的情況下，保持那幾行和那幾列固定，這個需求其實是一個非常常見的需求，因為在涉及好多行和列時，在拖動滾動條時，我們需要知道每行每列表示的是什麼意思，當被遮擋後，就很難記住是表示的什麼內容了，如下圖所示：我想要保持學生姓名和線上狀態保持不動，以及前三行表示章節以及微課習題的內容保持不變，當然在easyui或者其他的一些外掛裡這種特性早已經有了，例如在easyui中有frozen屬性，可以設定哪一行哪一列進行凍結，具體可以看官方的列子EasyUI在資料表格中凍結的行和列, 當然這些在特定的行和列中使用是很方便的，但是針對我的需求確實相當的麻煩，因為在之前所有的資料以及表格的生成都已經完成了，再進行改寫會很費時費力，而且在我的需求中行和列都是動態的，所有的內容都是動態的，

於是翻遍了整個園子，終於找到了一個合適的解決辦法，有人寫了這樣一個外掛，TableFreeze.js，它的實現原理其實跟easyui的原理是一樣的，實際上是建立了多個Table，將所有的固定的行和列都Clone了一個table，進行重疊放置，進行絕對定位，這樣不管是橫向還是豎向，都會有重複的表格保持不動，在視覺上就形成了凍結，實際上拖動時原來的表格還是在動的，下面附上所有的引用的外掛，注意在TableFreeze.js中有一個地方是判斷是否是IE瀏覽器的，語法是這樣的if($.browser.msie){} 這一句應該是在jQuery1.9以後就去掉了，不再支援了，需要引入另一個外掛jquery-migrate-1.2.1.js 這個jQuery外掛會把jQuery高版本中去掉的語法或特性都給補充完整，保證以前的寫法可以繼續使用，所以在引入凍結行和列的js前要先引入這個外掛，下面引入我的程式碼塊（後臺找不到原來文章的出處了，我將所有的程式碼都放入到了我的部落格中，如有見過，請幫忙標註文章出處，本文也只是站在前人的肩膀上改造）：

/*********************************
** 名稱:JQeury實現表格行列凍結
**
** 作者:YJJ
**
** 時間:2014年4月16日
**
** 修改人：Allen
**
** 修改時間:2017-06-10
**
** 修改記錄:相容
**
** 描述:類似Excel中的凍結窗格功能.建議給出表頭固定寬度,所有單元格的高度,指定表格寬度;
**********************************/
$.fn.mergeAttributes = function(src){
	if($.browser.msie) {
		$(this).get(0).mergeAttributes(src.get(0));
	}else{
		attrs = src.get(0).attributes;
		i = attrs.length - 1;
		for(;i>=0;i--){
			var name = attrs[i].name;
			if(name.toLowerCase() === 'id' || attrs[i].value=="" || attrs[i].value==null ||attrs[i].value=="null"){
				continue;
			}
			try{
				$(this).attr(name,attrs[i].value);
			}catch(e){
			}
		}
	}
}
$.fn.FrozenTable = function(iRowHead,iRowFoot,iColLeft){//3,0,1
	var oTable = $(this);
	var oTableId = oTable.attr("id");
	var oDiv = $(this).parent();
	if(oDiv.get(0).tagName != "DIV") return;
	oTable.find("td").attr("noWrap","nowrap");
	//oTable.css("table-layout","fixed");

    if (oTable.width() > oDiv.width() && oTable.height() > oDiv.height()) {
		if(iRowHead>0 && iColLeft>0){
			var oCloneTable = $("<table id='oTableLH_"+oTableId+"'></table>");//建立的是左側列和行交集的表頭
			oDiv.parent().append(oCloneTable);
			oCloneTable.CloneTable(oTable,0,iRowHead,iColLeft);
			oCloneTable.css("position","absolute");
			oCloneTable.css("z-index","1004");
			oCloneTable.css("left",oDiv.offset().left);
			oCloneTable.css("border-bottom-style",'none');
            oCloneTable.css("border-top-style", 'none');
			oCloneTable.css("top",oDiv.offset().top);
		}
		if(iRowFoot>0 && iColLeft>0){
			var oCloneTable = $("<table id='oTableLF_"+oTableId+"'></table>");	
			oDiv.parent().append(oCloneTable);
			oCloneTable.CloneTable(oTable,oTable.find("tr").length-iRowFoot,oTable.find("tr").length,iColLeft);
			oCloneTable.css("position","absolute");
			oCloneTable.css("z-index","1003");
			oCloneTable.css("left",oDiv.offset().left);
			oCloneTable.css("top",(oDiv.offset().top+oDiv.outerHeight(true)-oCloneTable.outerHeight(true)-17));
		}
	}
    if (iRowHead > 0 && oTable.height() > oDiv.height()) {
		var oCloneDiv = $("<div id='oDivH_"+oTableId+"'><table></table></div>");
		oDiv.parent().append(oCloneDiv);
		oCloneDiv.find("table").CloneTable(oTable,0,iRowHead,-1);
		oCloneDiv.css("overflow","hidden");
		oCloneDiv.css("width",oDiv.outerWidth(true)-17);
		oCloneDiv.css("position","absolute");
		oCloneDiv.css("z-index","1002");
		oCloneDiv.css("left",oDiv.offset().left);
		oCloneDiv.css("top",oDiv.offset().top);
	}
    if (iRowFoot > 0 && oTable.height() > oDiv.height()) {
		var oCloneDiv = $("<div id='oDivF_"+oTableId+"'><table></table></div>");
		oDiv.parent().append(oCloneDiv);
		oCloneDiv.find("table").CloneTable(oTable,oTable.find("tr").length-iRowFoot,oTable.find("tr").length,-1);
		oCloneDiv.css("overflow","hidden");
		oCloneDiv.css("width",oDiv.outerWidth(true)-17);
		oCloneDiv.css("position","absolute");
		oCloneDiv.css("z-index","1001");
		oCloneDiv.css("left",oDiv.offset().left);
		oCloneDiv.css("top",oDiv.offset().top+oDiv.outerHeight(true)-oCloneTable.outerHeight(true)-17);
	}
    if (iColLeft > 0 && oTable.width() > oDiv.width()) {
		var oCloneDiv = $("<div id='oDivL_"+oTableId+"'><table></table></div>");
		oDiv.parent().append(oCloneDiv);
		oCloneDiv.find("table").CloneTable(oTable,0,oTable.find("tr").length,iColLeft);
		oCloneDiv.css("overflow","hidden");
		oCloneDiv.css("height",oDiv.outerHeight(true)-17);
		oCloneDiv.css("position","absolute");
		oCloneDiv.css("z-index","1000");
        //oCloneDiv.css("left", oDiv.offset().left);//註釋掉可解決錯亂問題
		oCloneDiv.css("top",oDiv.offset().top);
	}
	oDiv.scroll(function(){
		if(typeof($("#oDivH_"+oTableId).get(0))!='undefined'){
			$("#oDivH_"+oTableId).scrollLeft($(this).scrollLeft());
		}
		if(typeof($("#oDivF_"+oTableId).get(0))!='undefined'){
			$("#oDivF_"+oTableId).scrollLeft($(this).scrollLeft());
		}
		if(typeof($("#oDivL_"+oTableId).get(0))!='undefined'){
			$("#oDivL_"+oTableId).scrollTop($(this).scrollTop());
		}
	});
};
$.fn.CloneTable = function(oSrcTable,iRowStart,iRowEnd,iColumnEnd){
	var iWidth = 0,iHeight = 0;
	$(this).mergeAttributes(oSrcTable);
	var Log="";
	var rowspanValue = 0;
	var rowNumber = 0;
	var rowIndex;
	for(var i=iRowStart;i<iRowEnd;i++){
		var oldTr = oSrcTable.find("tr").eq(i);
		var isSingleRowspan = false;
		var rowspanCount = 0;
		var colCount = 0;
		var colNumber = 0;
		for(var j=0; j<(iColumnEnd==-1?oldTr.find("td").length:iColumnEnd); j++){
			var oidTd = oldTr.find("td").eq(j);
			colNumber++;
			var colspan = oidTd.attr("colspan");
			if (typeof(colspan)=="undefined" || colspan==1) { 
			   colCount += 1;
			}else{
			   colCount += colspan;
			}  
			var rowspan = oidTd.attr("rowspan");
			if(typeof(rowspan)!="undefined" && rowspan!=1){
				rowspanCount++;
				rowIndex = i;
				rowspanValue = rowspan;
				rowNumber = rowspanCount;
			}
			if(colCount>=iColumnEnd && iColumnEnd!=-1){
				break;
			}
		} 
		Log +=i+"=="+rowIndex+"="+rowspanCount+"="+rowNumber+"="+rowspanValue+"<br>";
		if(i>rowIndex && i<=(rowIndex+rowspanValue-1) && iColumnEnd!=-1){
			if(rowNumber!=0 && iColumnEnd==rowNumber){
				isSingleRowspan = true;
			}else{
				colNumber -= 1;
				if(rowspanCount==0){
					colNumber -= (rowNumber-1);
				}
			}
		}
		if(colNumber!=0){
			var newTr = $("<tr></tr>");
			newTr.mergeAttributes(oldTr);
			var jWidth = 0;
			iHeight += oldTr.outerHeight(true);
			for(var j=0; j<colNumber;j++){
				if(isSingleRowspan){
					continue;
				}
				var oidTd = oldTr.find("td").eq(j);
				var newTd = oidTd.clone();
				
				/*IE 一行多列合併時
				if(iColumnEnd==-1 && iRowStart!=0 && $.browser.msie){
					if (typeof(newTd.attr("colspan"))!="undefined" && newTd.attr("colspan")!=1) { 
						alert(newTd.text()+"==2=="+newTd.attr("colspan")+"---"+colCount);
					}  
				}
				if(iColumnEnd==-1 && iRowStart!=0 && j==1){
				    newTd.width(oidTd.outerWidth(true)-1);
					jWidth += (oidTd.outerWidth(true)-1);
				}else{
					newTd.width(oidTd.outerWidth(true));
					jWidth += oidTd.outerWidth(true);
				}*/

				newTd.height(oidTd.outerHeight(true)-1);
				newTd.width(oidTd.outerWidth(true));
				jWidth += oidTd.outerWidth(true);
				iWidth = Math.max(iWidth,jWidth);
				newTr.append(newTd);
			}
			$(this).append(newTr);
		}
	}
	$(this).width(iWidth);
	$(this).height(iHeight);
}
jquery-migrate-1.2.1.js
/*!
 * jQuery Migrate - v1.2.1 - 2013-05-08
 * https://github.com/jquery/jquery-migrate
 * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors; Licensed MIT
 */
(function( jQuery, window, undefined ) {
// See http://bugs.jquery.com/ticket/13335
// "use strict";


var warnedAbout = {};

// List of warnings already given; public read only
jQuery.migrateWarnings = [];

// Set to true to prevent console output; migrateWarnings still maintained
// jQuery.migrateMute = false;

// Show a message on the console so devs know we're active
if ( !jQuery.migrateMute && window.console && window.console.log ) {
	window.console.log("JQMIGRATE: Logging is active");
}

// Set to false to disable traces that appear with warnings
if ( jQuery.migrateTrace === undefined ) {
	jQuery.migrateTrace = true;
}

// Forget any warnings we've already given; public
jQuery.migrateReset = function() {
	warnedAbout = {};
	jQuery.migrateWarnings.length = 0;
};

function migrateWarn( msg) {
	var console = window.console;
	if ( !warnedAbout[ msg ] ) {
		warnedAbout[ msg ] = true;
		jQuery.migrateWarnings.push( msg );
		if ( console && console.warn && !jQuery.migrateMute ) {
			//console.warn( "JQMIGRATE: " + msg );
			if ( jQuery.migrateTrace && console.trace ) {
				//console.trace();
			}
		}
	}
}

function migrateWarnProp( obj, prop, value, msg ) {
	if ( Object.defineProperty ) {
		// On ES5 browsers (non-oldIE), warn if the code tries to get prop;
		// allow property to be overwritten in case some other plugin wants it
		try {
			Object.defineProperty( obj, prop, {
				configurable: true,
				enumerable: true,
				get: function() {
					migrateWarn( msg );
					return value;
				},
				set: function( newValue ) {
					migrateWarn( msg );
					value = newValue;
				}
			});
			return;
		} catch( err ) {
			// IE8 is a dope about Object.defineProperty, can't warn there
		}
	}

	// Non-ES5 (or broken) browser; just set the property
	jQuery._definePropertyBroken = true;
	obj[ prop ] = value;
}

if ( document.compatMode === "BackCompat" ) {
	// jQuery has never supported or tested Quirks Mode
	migrateWarn( "jQuery is not compatible with Quirks Mode" );
}


var attrFn = jQuery( "<input/>", { size: 1 } ).attr("size") && jQuery.attrFn,
	oldAttr = jQuery.attr,
	valueAttrGet = jQuery.attrHooks.value && jQuery.attrHooks.value.get ||
		function() { return null; },
	valueAttrSet = jQuery.attrHooks.value && jQuery.attrHooks.value.set ||
		function() { return undefined; },
	rnoType = /^(?:input|button)$/i,
	rnoAttrNodeType = /^[238]$/,
	rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,
	ruseDefault = /^(?:checked|selected)$/i;

// jQuery.attrFn
migrateWarnProp( jQuery, "attrFn", attrFn || {}, "jQuery.attrFn is deprecated" );

jQuery.attr = function( elem, name, value, pass ) {
	var lowerName = name.toLowerCase(),
		nType = elem && elem.nodeType;

	if ( pass ) {
		// Since pass is used internally, we only warn for new jQuery
		// versions where there isn't a pass arg in the formal params
		if ( oldAttr.length < 4 ) {
			migrateWarn("jQuery.fn.attr( props, pass ) is deprecated");
		}
		if ( elem && !rnoAttrNodeType.test( nType ) &&
			(attrFn ? name in attrFn : jQuery.isFunction(jQuery.fn[name])) ) {
			return jQuery( elem )[ name ]( value );
		}
	}

	// Warn if user tries to set `type`, since it breaks on IE 6/7/8; by checking
	// for disconnected elements we don't warn on $( "<button>", { type: "button" } ).
	if ( name === "type" && value !== undefined && rnoType.test( elem.nodeName ) && elem.parentNode ) {
		migrateWarn("Can't change the 'type' of an input or button in IE 6/7/8");
	}

	// Restore boolHook for boolean property/attribute synchronization
	if ( !jQuery.attrHooks[ lowerName ] && rboolean.test( lowerName ) ) {
		jQuery.attrHooks[ lowerName ] = {
			get: function( elem, name ) {
				// Align boolean attributes with corresponding properties
				// Fall back to attribute presence where some booleans are not supported
				var attrNode,
					property = jQuery.prop( elem, name );
				return property === true || typeof property !== "boolean" &&
					( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?

					name.toLowerCase() :
					undefined;
			},
			set: function( elem, value, name ) {
				var propName;
				if ( value === false ) {
					// Remove boolean attributes when set to false
					jQuery.removeAttr( elem, name );
				} else {
					// value is true since we know at this point it's type boolean and not false
					// Set boolean attributes to the same name and set the DOM property
					propName = jQuery.propFix[ name ] || name;
					if ( propName in elem ) {
						// Only set the IDL specifically if it already exists on the element
						elem[ propName ] = true;
					}

					elem.setAttribute( name, name.toLowerCase() );
				}
				return name;
			}
		};

		// Warn only for attributes that can remain distinct from their properties post-1.9
		if ( ruseDefault.test( lowerName ) ) {
			migrateWarn( "jQuery.fn.attr('" + lowerName + "') may use property instead of attribute" );
		}
	}

	return oldAttr.call( jQuery, elem, name, value );
};

// attrHooks: value
jQuery.attrHooks.value = {
	get: function( elem, name ) {
		var nodeName = ( elem.nodeName || "" ).toLowerCase();
		if ( nodeName === "button" ) {
			return valueAttrGet.apply( this, arguments );
		}
		if ( nodeName !== "input" && nodeName !== "option" ) {
			migrateWarn("jQuery.fn.attr('value') no longer gets properties");
		}
		return name in elem ?
			elem.value :
			null;
	},
	set: function( elem, value ) {
		var nodeName = ( elem.nodeName || "" ).toLowerCase();
		if ( nodeName === "button" ) {
			return valueAttrSet.apply( this, arguments );
		}
		if ( nodeName !== "input" && nodeName !== "option" ) {
			migrateWarn("jQuery.fn.attr('value', val) no longer sets properties");
		}
		// Does not return so that setAttribute is also used
		elem.value = value;
	}
};


var matched, browser,
	oldInit = jQuery.fn.init,
	oldParseJSON = jQuery.parseJSON,
	// Note: XSS check is done below after string is trimmed
	rquickExpr = /^([^<]*)(<[\w\W]+>)([^>]*)$/;

// $(html) "looks like html" rule change
jQuery.fn.init = function( selector, context, rootjQuery ) {
	var match;

	if ( selector && typeof selector === "string" && !jQuery.isPlainObject( context ) &&
			(match = rquickExpr.exec( jQuery.trim( selector ) )) && match[ 0 ] ) {
		// This is an HTML string according to the "old" rules; is it still?
		if ( selector.charAt( 0 ) !== "<" ) {
			migrateWarn("$(html) HTML strings must start with '<' character");
		}
		if ( match[ 3 ] ) {
			migrateWarn("$(html) HTML text after last tag is ignored");
		}
		// Consistently reject any HTML-like string starting with a hash (#9521)
		// Note that this may break jQuery 1.6.x code that otherwise would work.
		if ( match[ 0 ].charAt( 0 ) === "#" ) {
			migrateWarn("HTML string cannot start with a '#' character");
			jQuery.error("JQMIGRATE: Invalid selector string (XSS)");
		}
		// Now process using loose rules; let pre-1.8 play too
		if ( context && context.context ) {
			// jQuery object as context; parseHTML expects a DOM object
			context = context.context;
		}
		if ( jQuery.parseHTML ) {
			return oldInit.call( this, jQuery.parseHTML( match[ 2 ], context, true ),
					context, rootjQuery );
		}
	}
	return oldInit.apply( this, arguments );
};
jQuery.fn.init.prototype = jQuery.fn;

// Let $.parseJSON(falsy_value) return null
jQuery.parseJSON = function( json ) {
	if ( !json && json !== null ) {
		migrateWarn("jQuery.parseJSON requires a valid JSON string");
		return null;
	}
	return oldParseJSON.apply( this, arguments );
};

jQuery.uaMatch = function( ua ) {
	ua = ua.toLowerCase();

	var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
		/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
		/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
		/(msie) ([\w.]+)/.exec( ua ) ||
		ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
		[];

	return {
		browser: match[ 1 ] || "",
		version: match[ 2 ] || "0"
	};
};

// Don't clobber any existing jQuery.browser in case it's different
if ( !jQuery.browser ) {
	matched = jQuery.uaMatch( navigator.userAgent );
	browser = {};

	if ( matched.browser ) {
		browser[ matched.browser ] = true;
		browser.version = matched.version;
	}

	// Chrome is Webkit, but Webkit is also Safari.
	if ( browser.chrome ) {
		browser.webkit = true;
	} else if ( browser.webkit ) {
		browser.safari = true;
	}

	jQuery.browser = browser;
}

// Warn if the code tries to get jQuery.browser
migrateWarnProp( jQuery, "browser", jQuery.browser, "jQuery.browser is deprecated" );

jQuery.sub = function() {
	function jQuerySub( selector, context ) {
		return new jQuerySub.fn.init( selector, context );
	}
	jQuery.extend( true, jQuerySub, this );
	jQuerySub.superclass = this;
	jQuerySub.fn = jQuerySub.prototype = this();
	jQuerySub.fn.constructor = jQuerySub;
	jQuerySub.sub = this.sub;
	jQuerySub.fn.init = function init( selector, context ) {
		if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
			context = jQuerySub( context );
		}

		return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
	};
	jQuerySub.fn.init.prototype = jQuerySub.fn;
	var rootjQuerySub = jQuerySub(document);
	migrateWarn( "jQuery.sub() is deprecated" );
	return jQuerySub;
};


// Ensure that $.ajax gets the new parseJSON defined in core.js
jQuery.ajaxSetup({
	converters: {
		"text json": jQuery.parseJSON
	}
});


var oldFnData = jQuery.fn.data;

jQuery.fn.data = function( name ) {
	var ret, evt,
		elem = this[0];

	// Handles 1.7 which has this behavior and 1.8 which doesn't
	if ( elem && name === "events" && arguments.length === 1 ) {
		ret = jQuery.data( elem, name );
		evt = jQuery._data( elem, name );
		if ( ( ret === undefined || ret === evt ) && evt !== undefined ) {
			migrateWarn("Use of jQuery.fn.data('events') is deprecated");
			return evt;
		}
	}
	return oldFnData.apply( this, arguments );
};


var rscriptType = /\/(java|ecma)script/i,
	oldSelf = jQuery.fn.andSelf || jQuery.fn.addBack;

jQuery.fn.andSelf = function() {
	migrateWarn("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()");
	return oldSelf.apply( this, arguments );
};

// Since jQuery.clean is used internally on older versions, we only shim if it's missing
if ( !jQuery.clean ) {
	jQuery.clean = function( elems, context, fragment, scripts ) {
		// Set context per 1.8 logic
		context = context || document;
		context = !context.nodeType && context[0] || context;
		context = context.ownerDocument || context;

		migrateWarn("jQuery.clean() is deprecated");

		var i, elem, handleScript, jsTags,
			ret = [];

		jQuery.merge( ret, jQuery.buildFragment( elems, context ).childNodes );

		// Complex logic lifted directly from jQuery 1.8
		if ( fragment ) {
			// Special handling of each script element
			handleScript = function( elem ) {
				// Check if we consider it executable
				if ( !elem.type || rscriptType.test( elem.type ) ) {
					// Detach the script and store it in the scripts array (if provided) or the fragment
					// Return truthy to indicate that it has been handled
					return scripts ?
						scripts.push( elem.parentNode ? elem.parentNode.removeChild( elem ) : elem ) :
						fragment.appendChild( elem );
				}
			};

			for ( i = 0; (elem = ret[i]) != null; i++ ) {
				// Check if we're done after handling an executable script
				if ( !( jQuery.nodeName( elem, "script" ) && handleScript( elem ) ) ) {
					// Append to fragment and handle embedded scripts
					fragment.appendChild( elem );
					if ( typeof elem.getElementsByTagName !== "undefined" ) {
						// handleScript alters the DOM, so use jQuery.merge to ensure snapshot iteration
						jsTags = jQuery.grep( jQuery.merge( [], elem.getElementsByTagName("script") ), handleScript );

						// Splice the scripts into ret after their former ancestor and advance our index beyond them
						ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) );
						i += jsTags.length;
					}
				}
			}
		}

		return ret;
	};
}

var eventAdd = jQuery.event.add,
	eventRemove = jQuery.event.remove,
	eventTrigger = jQuery.event.trigger,
	oldToggle = jQuery.fn.toggle,
	oldLive = jQuery.fn.live,
	oldDie = jQuery.fn.die,
	ajaxEvents = "ajaxStart|ajaxStop|ajaxSend|ajaxComplete|ajaxError|ajaxSuccess",
	rajaxEvent = new RegExp( "\\b(?:" + ajaxEvents + ")\\b" ),
	rhoverHack = /(?:^|\s)hover(\.\S+|)\b/,
	hoverHack = function( events ) {
		if ( typeof( events ) !== "string" || jQuery.event.special.hover ) {
			return events;
		}
		if ( rhoverHack.test( events ) ) {
			migrateWarn("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'");
		}
		return events && events.replace( rhoverHack, "mouseenter$1 mouseleave$1" );
	};

// Event props removed in 1.9, put them back if needed; no practical way to warn them
if ( jQuery.event.props && jQuery.event.props[ 0 ] !== "attrChange" ) {
	jQuery.event.props.unshift( "attrChange", "attrName", "relatedNode", "srcElement" );
}

// Undocumented jQuery.event.handle was "deprecated" in jQuery 1.7
if ( jQuery.event.dispatch ) {
	migrateWarnProp( jQuery.event, "handle", jQuery.event.dispatch, "jQuery.event.handle is undocumented and deprecated" );
}

// Support for 'hover' pseudo-event and ajax event warnings
jQuery.event.add = function( elem, types, handler, data, selector ){
	if ( elem !== document && rajaxEvent.test( types ) ) {
		migrateWarn( "AJAX events should be attached to document: " + types );
	}
	eventAdd.call( this, elem, hoverHack( types || "" ), handler, data, selector );
};
jQuery.event.remove = function( elem, types, handler, selector, mappedTypes ){
	eventRemove.call( this, elem, hoverHack( types ) || "", handler, selector, mappedTypes );
};

jQuery.fn.error = function() {
	var args = Array.prototype.slice.call( arguments, 0);
	migrateWarn("jQuery.fn.error() is deprecated");
	args.splice( 0, 0, "error" );
	if ( arguments.length ) {
		return this.bind.apply( this, args );
	}
	// error event should not bubble to window, although it does pre-1.7
	this.triggerHandler.apply( this, args );
	return this;
};

jQuery.fn.toggle = function( fn, fn2 ) {

	// Don't mess with animation or css toggles
	if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) {
		return oldToggle.apply( this, arguments );
	}
	migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");

	// Save reference to arguments for access in closure
	var args = arguments,
		guid = fn.guid || jQuery.guid++,
		i = 0,
		toggler = function( event ) {
			// Figure out which function to execute
			var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
			jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );

			// Make sure that clicks stop
			event.preventDefault();

			// and execute the function
			return args[ lastToggle ].apply( this, arguments ) || false;
		};

	// link all the functions, so any of them can unbind this click handler
	toggler.guid = guid;
	while ( i < args.length ) {
		args[ i++ ].guid = guid;
	}

	return this.click( toggler );
};

jQuery.fn.live = function( types, data, fn ) {
	migrateWarn("jQuery.fn.live() is deprecated");
	if ( oldLive ) {
		return oldLive.apply( this, arguments );
	}
	jQuery( this.context ).on( types, this.selector, data, fn );
	return this;
};

jQuery.fn.die = function( types, fn ) {
	migrateWarn("jQuery.fn.die() is deprecated");
	if ( oldDie ) {
		return oldDie.apply( this, arguments );
	}
	jQuery( this.context ).off( types, this.selector || "**", fn );
	return this;
};

// Turn global events into document-triggered events
jQuery.event.trigger = function( event, data, elem, onlyHandlers  ){
	if ( !elem && !rajaxEvent.test( event ) ) {
		migrateWarn( "Global events are undocumented and deprecated" );
	}
	return eventTrigger.call( this,  event, data, elem || document, onlyHandlers  );
};
jQuery.each( ajaxEvents.split("|"),
	function( _, name ) {
		jQuery.event.special[ name ] = {
			setup: function() {
				var elem = this;

				// The document needs no shimming; must be !== for oldIE
				if ( elem !== document ) {
					jQuery.event.add( document, name + "." + jQuery.guid, function() {
						jQuery.event.trigger( name, null, elem, true );
					});
					jQuery._data( this, name, jQuery.guid++ );
				}
				return false;
			},
			teardown: function() {
				if ( this !== document ) {
					jQuery.event.remove( document, name + "." + jQuery._data( this, name ) );
				}
				return false;
			}
		};
	}
);


})( jQuery, window );
3.index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQeury實現表格行列凍結3</title>

<style type='text/css'> 
table{empty-cells:show;border-collapse:collapse;border-spacing:0}
table{font-family:宋體; font-size:10pt;border:1px green solid;background-color:white;}
table td{height:20px;text-align:center;border:1px green solid;}
table .tabTh{color:green;font-weight:bold;background-color:#f1faee;}
</style>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="js/TableFreeze.js"></script>
<script type='text/javascript'>
$(document).ready(function(){

	$("#tab_Test1").FrozenTable(2,0,0);
	
	$("#tab_Test2").FrozenTable(0,0,1);
	
	$("#tab_Test3").FrozenTable(1,0,1);
	
	$("#tab_Test4").FrozenTable(2,1,1);
	
	$("#tab_Test5").FrozenTable(3,1,4);
	
	$("#tab_Test6").FrozenTable(2,1,2);
	
	$("#tab_Test7").FrozenTable(2,2,1);
	
});
</script>

</head>
<body>
<!--**************************************-->
<h3>例0:原始表格上加滾動條效果;</h3>
<div style="overflow:auto;width:920px;height:229px;">
	<table id="tab_Test0" border="1" width='900'>
		<tr class='tabTh'>
			<td width="100px">序號</td>
			<td width="100px">使用者名稱</td>
			<td width="100px">姓名</td>
			<td width="100px">歸屬機構</td>
			<td width="100px">密碼</td>
			<td width="100px">使用者型別</td>
			<td width="200px">狀 態(0無效/1有效)</td>
			<td width="100px">備註</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>1</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>2</td>
			<td>admin2</td>
			<td>admin2</td>
			<td>92</td>
			<td>******</td>
			<td>系統管理員2</td>	
			<td>1</td>
			<td>it管理員2</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>3</td>
			<td>admin3</td>
			<td>admin3</td>
			<td>93</td>
			<td>******</td>
			<td>系統管理員3</td>	
			<td>1</td>
			<td>it管理員3</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>4</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>14</td>
			<td>it管理員4</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>5</td>
			<td>admin5</td>
			<td>admin5</td>
			<td>95</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>6</td>
			<td>admin6</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>7</td>
			<td>admin7</td>
			<td>admin7</td>
			<td>7</td>
			<td>******</td>
			<td>系統管理員7</td>	
			<td>1</td>
			<td>it管理員7</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>8</td>
			<td>admin8</td>
			<td>admin8</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員8</td>	
			<td>1</td>
			<td>it管理員8</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>9</td>
			<td>admin9</td>
			<td>admin9</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>10</td>
			<td>admin10</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員10</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>11</td>
			<td>admin11</td>
			<td>admin11</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員11</td>	
			<td>1</td>
			<td>it管理員11</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>12</td>
			<td>admin12</td>
			<td>admin12</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員12</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>13</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>14</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>15</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員5</td>	
			<td>1</td>
			<td>it管理員5</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>16</td>
			<td>admin</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>17</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>18</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>19</td>
			<td>admin19</td>
			<td>admin19</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>20</td>
			<td>admin20</td>
			<td>admin20</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
	</table>
</div>
<hr>

<!--**************************************-->
<h3>例一:2行固定 $("#tab_Test1").FrozenTable(2,0,0);</h3>
<div style="OVERFLOW: auto;width:920px;height:229px;">
	<table id="tab_Test1" border="1" width='900'>
		<tr class='tabTh'>
			<td colspan='8'>使用者列表</td>
		</tr>
		<tr class='tabTh'>
			<td width="100px">序號</td>
			<td width="100px">使用者名稱</td>
			<td width="100px">姓名</td>
			<td width="100px">歸屬機構</td>
			<td width="100px">密碼</td>
			<td width="100px">使用者型別</td>
			<td width="200px">狀 態(0無效/1有效)</td>
			<td width="100px">備註</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>1</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>2</td>
			<td>admin2</td>
			<td>admin2</td>
			<td>92</td>
			<td>******</td>
			<td>系統管理員2</td>	
			<td>1</td>
			<td>it管理員2</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>3</td>
			<td>admin3</td>
			<td>admin3</td>
			<td>93</td>
			<td>******</td>
			<td>系統管理員3</td>	
			<td>1</td>
			<td>it管理員3</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>4</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>14</td>
			<td>it管理員4</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>5</td>
			<td>admin5</td>
			<td>admin5</td>
			<td>95</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>6</td>
			<td>admin6</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>7</td>
			<td>admin7</td>
			<td>admin7</td>
			<td>7</td>
			<td>******</td>
			<td>系統管理員7</td>	
			<td>1</td>
			<td>it管理員7</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>8</td>
			<td>admin8</td>
			<td>admin8</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員8</td>	
			<td>1</td>
			<td>it管理員8</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>9</td>
			<td>admin9</td>
			<td>admin9</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>10</td>
			<td>admin10</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員10</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>11</td>
			<td>admin11</td>
			<td>admin11</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員11</td>	
			<td>1</td>
			<td>it管理員11</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>12</td>
			<td>admin12</td>
			<td>admin12</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員12</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>13</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>14</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>15</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員5</td>	
			<td>1</td>
			<td>it管理員5</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>16</td>
			<td>admin</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>17</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>18</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>19</td>
			<td>admin19</td>
			<td>admin19</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>20</td>
			<td>admin20</td>
			<td>admin20</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
	</table>
</div>
<hr>

<!--**************************************-->
<h3>例二:0行1列固定 $("#tab_Test2").FrozenTable(0,0,1);</h3>
<div style="OVERFLOW: auto;width:718px;height:229px;">
	<table id="tab_Test2" border="1" width='900'>
		<tr class='tabTh'>
			<td width="100px">序號</td>
			<td width="100px">使用者名稱</td>
			<td width="100px">姓名</td>
			<td width="100px">歸屬機構</td>
			<td width="100px">密碼</td>
			<td width="100px">使用者型別</td>
			<td width="200px">狀 態(0無效/1有效)</td>
			<td width="100px">備註</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>1</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>2</td>
			<td>admin2</td>
			<td>admin2</td>
			<td>92</td>
			<td>******</td>
			<td>系統管理員2</td>	
			<td>1</td>
			<td>it管理員2</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>3</td>
			<td>admin3</td>
			<td>admin3</td>
			<td>93</td>
			<td>******</td>
			<td>系統管理員3</td>	
			<td>1</td>
			<td>it管理員3</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>4</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>14</td>
			<td>it管理員4</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>5</td>
			<td>admin5</td>
			<td>admin5</td>
			<td>95</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>6</td>
			<td>admin6</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>7</td>
			<td>admin7</td>
			<td>admin7</td>
			<td>7</td>
			<td>******</td>
			<td>系統管理員7</td>	
			<td>1</td>
			<td>it管理員7</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>8</td>
			<td>admin8</td>
			<td>admin8</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員8</td>	
			<td>1</td>
			<td>it管理員8</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>9</td>
			<td>admin9</td>
			<td>admin9</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>10</td>
			<td>admin10</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員10</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>11</td>
			<td>admin11</td>
			<td>admin11</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員11</td>	
			<td>1</td>
			<td>it管理員11</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>12</td>
			<td>admin12</td>
			<td>admin12</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員12</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>13</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>14</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>15</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員5</td>	
			<td>1</td>
			<td>it管理員5</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>16</td>
			<td>admin</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>17</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>18</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>19</td>
			<td>admin19</td>
			<td>admin19</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>20</td>
			<td>admin20</td>
			<td>admin20</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
	</table>
</div>
<hr>


<!--**************************************-->
<h3>例三:1行1列固定 $("#tab_Test3").FrozenTable(1,0,1);</h3>
<div id="div_Test3" style="OVERFLOW: auto;width:718px;height:229px;padding:0px">
	<table id="tab_Test3" border="1" width='900'>
		<tr class='tabTh'>
			<td width="100px">序號</td>
			<td width="100px">使用者名稱</td>
			<td width="100px">姓名</td>
			<td width="100px">歸屬機構</td>
			<td width="100px">密碼</td>
			<td width="100px">使用者型別</td>
			<td width="200px">狀 態(0無效/1有效)</td>
			<td width="100px">備註</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>1</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>2</td>
			<td>admin2</td>
			<td>admin2</td>
			<td>92</td>
			<td>******</td>
			<td>系統管理員2</td>	
			<td>1</td>
			<td>it管理員2</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>3</td>
			<td>admin3</td>
			<td>admin3</td>
			<td>93</td>
			<td>******</td>
			<td>系統管理員3</td>	
			<td>1</td>
			<td>it管理員3</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>4</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>14</td>
			<td>it管理員4</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>5</td>
			<td>admin5</td>
			<td>admin5</td>
			<td>95</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>6</td>
			<td>admin6</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>7</td>
			<td>admin7</td>
			<td>admin7</td>
			<td>7</td>
			<td>******</td>
			<td>系統管理員7</td>	
			<td>1</td>
			<td>it管理員7</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>8</td>
			<td>admin8</td>
			<td>admin8</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員8</td>	
			<td>1</td>
			<td>it管理員8</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>9</td>
			<td>admin9</td>
			<td>admin9</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>10</td>
			<td>admin10</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員10</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>11</td>
			<td>admin11</td>
			<td>admin11</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員11</td>	
			<td>1</td>
			<td>it管理員11</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>12</td>
			<td>admin12</td>
			<td>admin12</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員12</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>13</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>14</td>
			<td>admin4</td>
			<td>admin4</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員4</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>15</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員5</td>	
			<td>1</td>
			<td>it管理員5</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>16</td>
			<td>admin</td>
			<td>admin6</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理6</td>	
			<td>1</td>
			<td>it管理員6</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>17</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>18</td>
			<td>admin</td>
			<td>admin</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>19</td>
			<td>admin19</td>
			<td>admin19</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
		<tr align='center'>
			<td><input type=checkbox>20</td>
			<td>admin20</td>
			<td>admin20</td>
			<td>9</td>
			<td>******</td>
			<td>系統管理員</td>	
			<td>1</td>
			<td>it管理員</td>
		</tr>
	</table>
</div>
<hr>


<!--**************************************-->
<h3>例四:上2行下1行1列固定 $("#tab_Test4").FrozenTable(2,1,1);</h3>
<div style="OVERFLOW: auto;width:518px;height:228px;">
<table id="tab_Test4" border="1" width='800'>
	<tbody>
		<tr class='tabTh'>
			<td rowspan=2 width="200" >評估險類</td>
			<td colspan=3>再保前</td>
			<td colspan=3>再保後</td>
		</tr>
		<tr class='tabTh'>
			<td width="100" >評估</td>
			<td width="100">分攤</td>
			<td width="100">差異</td>
			<td width="100">評估</td>
			<td width="100">分攤</td>
			<td width="100">差異</td>
		</tr>
		<tr>
			<td>106T-保證保險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>107T-車險(交強險)</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>108T-車險(商業險)</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>109T-房屋險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>110T-工程險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>111T-航空險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>112T-核能保險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>113T-貨運險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>114T-機損險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>

		<tr>
			<td>115T-家財_網路運輸</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>116T-健康險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>118T-農業保險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>119T-其他險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>120T-企財險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>121T-石油保險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>122T-責任險D&O</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>123T-責任險EPL</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>124T-責任險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>125T-船舶險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>126T-意外險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>127T-家財險</td>
			<td>12312.1</td>
			<td>122341</td>
			<td>45645.45</td>
			<td>6786.6</td>
			<td>2345.43</td>
			<td>6755.56</td>
		</tr>
		<tr>
			<td>合計</td>
			<td>6435656756.45</td>
			<td>3478787.78</td>
			<td>9789789.78</td>
			<td>456456456.4</td>
			<td>2345.45645</td>
			<td>2345645.645</td>
		</tr>
	</tbody>
</table>
</div>
<hr>


<!--**************************************-->
<h3>例五:上3行下1行4列固定 $("#tab_Test5").FrozenTable(3,1,4);</h3>
<div style="OVERFLOW: auto;width:830px;height:228px;">
	<table id='tab_Test5' border="1" width='1000'>
		<tbody align="right">
			<tr class='tabTh'>
				<td rowspan="3" width="100">險種大類</td>
				<td colspan='3'>201401</td>
				<td colspan='3'>201402</td>
				<td colspan='3'>201403</td>
			</tr>
			<tr class='tabTh'>
				<td colspan='3'>保費收入-再保前</td>
				<td colspan='3'>保費收入-再保前</td>
				<td colspan='3'>保費收入-再保前</td>
			</tr>
			<tr class='tabTh'>
				<td width="100">業務</td>
				<td width="100">財務</td>
				<td width="100">差異</td>
				<td width="100">業務</td>
				<td width="100">財務</td>
				<td width="100">差異</td>
				<td width="100">業務</td>
				<td width="100">財務</td>
				<td width="100">差異</td>
			</tr>
			<tr><td>106T-保證保險</td><td>1,550,703.52</td><td>1,550,703.52</td><td>0</td><td>33,253.36</td><td>33,751.68</td><td>-498.32</td><td>359,825.44</td><td>359,327.12</td><td><a href="javascript:funDetail(201403,11,'106T-保證保險');">498.32</a></td></tr><tr><td>107T-車險（交強險）</td><td>108,968,962.13</td><td>108,975,420.57</td><td>-6,458.44</td><td>59,672,975.8</td><td>59,672,975.8</td><td>0</td><td>93,049,926.62</td><td>93,048,446.62</td><td><a href="javascript:funDetail(201403,11,'107T-車險（交強險）');">1,480</a></td></tr><tr><td>108T-車險（商業險）</td><td>260,085,392.36</td><td>260,086,515.73</td><td>-1,123.37</td><td>131,815,686.81</td><td>131,819,291.79<

相關推薦

jQuery實現表格凍結行和列

前幾天，遇到一個需求是要將表格的前幾行和前幾列凍結即固定，就是在有滾動條的情況下，保持那幾行和那幾列固定，這個需求其實是一個非常常見的需求，因為在涉及好多行和列時，在拖動滾動條時，我們需要知道每行每列表示的是什麼意思，當被遮擋後，就很難記住是表示的什麼內容了，如下圖所示：我

用JQuery實現表格隔行換顏色

 最近在學習Jquery，其實很多論壇中都有一個特點就是每張貼都是隔行換顏色的，相信這點大家可能發現。那麼怎樣實現這種功能呢。方法有3種：     方法一：使用CSS樣式，定義兩個類的樣式，分別使用到表格中。這種方法想法簡單，相信很多人都想到。但是這樣做很麻煩，如果表格很多

JQuery 實現表格資料行上移與下移效果

效果展示 程式碼實現 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 例項 - 條紋表格</t

HTML動態增加和刪除表格的行和列

<!doctype html> <html> <head> <!--動態生成指定行數和列數的可編輯表格--> <style> </style> <script> function addrow(){   var c=docum

Vue 動態生成表格的行和列

當在開發專案的時候，固定的頁面表格標題及內容不能滿足需求，需要根據不同的需求動態載入不同的表格表頭和表格的內容，具體的實現程式碼如下： <template> <div class="boxShadow"> <div style="m

js實現動態刪除表格的行或者列-------Day57

back _id ron easy 技術 註意 次循環 ont 時序 昨天記錄了動態加入表格的一行，當然這個一行是指一行數據，也就是說一行多少列也是加上的，而且第幾列的內容都能夠加入上，先來回想下它的實現的關鍵點： 1、var row=table.i

利用jQuery實現表格的隔行變色、高亮顯示

his padding idt font pad adding har asc itl <!DOCTYPE html><html><head><meta charset="utf-8"><title&

JQuery案例一：實現表格隔行換色

body ble () ++ doc cti seo head 姓名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

jQuery實現表格行的動態增加與刪除(改進版)

ans XML 隱藏域 locks 頁面 order blog 這樣的 ken 之前寫過一個簡單的利用jQuery實現表格行的動態增加與刪除的例子，有些人評論說"如果表格中是input元素，那麽刪除後的東西都將自動替換，這樣應該是有問題的，建議樓主改進！"，故特意改進了一下

js實現表格隔行變色和滑鼠移入高亮

程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g

JQuery實現表格奇偶數行變色

HTML程式碼部分start <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格奇偶數行變色</title>&l

如何建立表格，建立行和列

如何建立表格，建立行和列 行: <input type="text" id="row" /> 列: <input type="text" id="col" /> <button id="btn">建立</button> <

jquery獲取伺服器控制元件girdview的行和列的值

用下面簡單的表格表示一個進過繫結資料的伺服器控制元件gridview 其中girdview的ID為ViewMsg “檢視”控制元件是linkbutton  序號 名字 操作 1 aa 檢視 2 bb 檢視 <asp:TemplateField

【隨記】JQuery實現表格的雙擊編輯功能(自動適應表格高度和寬度)

<html> <head> <!-- 設定JQuery的路徑 --> <script src="../jQuery/jquery-1.11.2.min.js"></script> <script type="

jquery 實現表格奇數偶數行顏色不一樣 ，可以實現不同的效果，區分奇數偶數行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>  <head>   <title> New Document </title&g

jquery獲取td所在的行和列

使用jquery的preAll()獲取列） 程式碼如下： [html] view plaincopyprint? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

jQuery 實現表格最後增加一行和刪除最後一行

<script type="text/javascript">  $(document).ready(function(){   $("#btn3").click(function(){    var len=$("table tr").length;    $("table").append("

jQuery實現表格行點選選中複選框

js程式碼，頁面初始化執行：$(".list tr").each(function(){ $(this).children().click(function(e){ $(e.target).parent("tr.item").each

jquery實現表格中點選相應行變色功能

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title><

Jquery實現賬單全部選中和部分選中管理

jquery在做購物車系統是我們往往會遇到這樣一個需求,在點擊全選框時我們要將全部的單個賬單都選中;在單個選中賬單時,如果賬單全部被選中則需要全選框處於選中狀態,若沒有全部被選中則全選框處於沒選中狀態;以下是在學習過程的實現代碼:<script type="text/javascript">$(d