- 爱易网页
 
                        - 
                            JavaSript
 
                        - 经过js控制表格第一行不动以及表格全屏显示 
 
                         
                    
                    
                    日期:2014-05-16  浏览次数:20512 次 
                    
                        
                         通过js控制表格第一行不动以及表格全屏显示
    fixTable.js
------------
function FixTable() {
	var that = this;
	/// <summary>
	///     锁定表头和列
	///     <para> sorex.cnblogs.com </para>
	/// </summary>
	/// <param name="TableID" type="String">
	///     要锁定的Table的ID
	/// </param>
	/// <param name="FixColumnNumber" type="Number">
	///     要锁定列的个数
	/// </param>
	/// <param name="width" type="Number">
	///     显示的宽度
	/// </param>
	/// <param name="height" type="Number">
	///     显示的高度
	/// </param>
	this.FixTable = function(TableID,FixHeadCol) {
		if ($("#" + TableID + "_tableLayout").length != 0) {
			$("#" + TableID + "_tableLayout").before($("#" + TableID));
			$("#" + TableID + "_tableLayout").empty();
		} else {
			$("#" + TableID).after(
					"<div id='" + TableID
							+ "_tableLayout' style='overflow:hidden;height:100%; width:100%;'></div>");
		}
		$('<div id="' + TableID + '_tableFix"></div>' + '<div id="'
						+ TableID + '_tableHead"></div>' + '<div id="'
						+ TableID + '_tableColumn"></div>' + '<div id="'
						+ TableID + '_tableData"></div>').appendTo(
				"#" + TableID + "_tableLayout");
		var oldtable = $("#" + TableID);
		var tableFixClone = oldtable.clone(true);
		tableFixClone.attr("id", TableID + "_tableFixClone");
		$("#" + TableID + "_tableFix").append(tableFixClone);//固定头和固定列的交集区域
		var tableHeadClone = oldtable.clone(true);
		tableHeadClone.attr("id", TableID + "_tableHeadClone");
		$("#" + TableID + "_tableHead").append(tableHeadClone);//固定头部区域
		var tableColumnClone = oldtable.clone(true);
		tableColumnClone.attr("id", TableID + "_tableColumnClone");
		$("#" + TableID + "_tableColumn").append(tableColumnClone);//固定列区域
		$("#" + TableID + "_tableData").append(oldtable);//主题数据区域
		$("#" + TableID + "_tableLayout table").each(function() {
			$(this).css("margin", "0");
		});
		var HeadHeight=0; 
		//alert(FixHeadCol);
		if(FixHeadCol){					
		}else{
			FixHeadCol=1;
		}			
		//for(var j=1;j<FixHeadCol+1;j++){
		//  alert($("#" + TableID + "_tableHead tr:lt(5)").html());
			HeadHeight= $("#" + TableID + "_tableHead tr:lt(2)").height();
		//}		
		//alert(HeadHeight);
		HeadHeight += 2;
		$("#" + TableID + "_tableHead").css("height", HeadHeight);
		$("#" + TableID + "_tableFix").css("height", HeadHeight);
		var ColumnsWidth = 0;
		var ColumnsNumber = 0;
		var ColumnsWidthList="";
		$("#" + TableID + "_tableColumn [name=fixcol]")
				.each(function() {
					ColumnsWidth += $(this).outerWidth(false);
					ColumnsNumber++;
					ColumnsWidthList=ColumnsWidthList+$(this).outerWidth(false)+','; 
		});		
			
		ColumnsWidth += 2;
		if ($.browser.msie) {
			switch ($.browser.version) {
			case "7.0":
				if (ColumnsNumber >= 3)
					ColumnsWidth--;
				break;
			case "8.0":
				if (ColumnsNumber >= 2)
					ColumnsWidth--;
				break;
			}
		}
		$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);//固定列宽度,以取最后一行每列的宽度为准
		$("#" + TableID + "_tableFix").css("width", ColumnsWidth);
		$("#" + TableID + "_tableFix").css( {
			"overflow" : "hidden",
			"position" : "relative",
			"z-index" : "50",
			//"background-color" : "#f9e3d6",
			"font-size" : "12px"
		});
		$("#" + TableID + "_tableHead").css( {
			"overflow" : "hidden",
			"width" : "100%",