通过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%",
"position" : "relative",
"z-index" : "45",
//"background-color" : "#f9e3d6",
"font-size" : "12px"
});
$("#" + TableID + "_tableColumn").css( {
"overflow" : "hidden",
"height" : "100%",
"position" : "relative",
"z-index" : "40",
//"background-color" : "#f9e3d6",
"font-size" : "12px"
});
$("#" + TableID + "_tableData").css( {
"overflow" : "scroll",
"width" : "100%",
"height" : "100%",
"position" : "relative",
//"background-color" : "#f9e3d6",
"z-index" : "35"
});
$("#" + TableID + "_tableData").scroll(
function() {
$("#" + TableID + "_tableHead").scrollLeft(
$("#" + TableID + "_tableData").scrollLeft());
$("#" + TableID + "_tableColumn").scrollTop(
$("#" + TableID + "_tableData").scrollTop());
});
if ($("#" + TableID + "_tableHead").width() > $(
"#" + TableID + "_tableFix table").width()) {
//$("#" + TableID + "_tableHead").css("width",$("#" + TableID + "_tableFix table").width());
//$("#" + TableID + "_tableData").css("width",$("#" + TableID + "_tableFix table").width() + 17);
}


if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height())
{
var tbheight=$("#" + TableID + "_tableColumn table").height();
if($("#" + TableID + "_tableData table tr").length<=11){
tbheight=$(".dlist").height()-17;
$(".dlist").css({"height": "375px"});
}else{
}
$("#" + TableID + "_tableColumn").css("height",tbheight+"px");
$("#" + TableID + "_tableData").css("height",(tbheight + 18)+"px");
//$(".dlist").css("height",tbheight+"px");
}

$("#" + TableID + "_tableFix").offset(
$("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableHead").offset(
$("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableColumn").offset(
$("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableData").offset(
$("#" + TableID + "_tableLayout").offset());

IntervalFun(TableID );
setInterval('IntervalFun("' + TableID + '")', 1000);
}

}
var fixTable = new FixTable();

function IntervalFun(TableID) {
$("#" + TableID + "_tableHead").css("width",$("#" + TableID + "_tableData").width() - 17);
$("#" + TableID + "_tableColumn").css("height",$("#" + TableID + "_tableData").height() - 17);

$("#" + TableID + "_tableLayout table").each(function() {
$(this).css("width", $(".dlist").width() - 17);
});

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);

var fixcollist =ColumnsWidthList.split(',');
$("#" + TableID + "_tableLayout table").each(function() {
$($(this).attr("id")+" [name=fixcol]").each(function(){
for (var i=0;i<fixcollist.length-1;i++){
$(this).css("width", fixcollist[i]+"px");
}
});
});

$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}
==============================================================
fullScreen.js
--------------
function FullScreen() {
var that = this;

var div;

var background;
var width;
var height;
var position;
var zindex;
var top;
var left;
var margintop;
var marginleft;
var marginright;
var marginbottom;

//全屏
this.FullScreen = function(divId) {

if (!document.getElementById("fullScreen_closeBar")) {
var backDiv = $('<div id="fullScreen_backDiv" style="display: none; background: gray; width: 100%; height: 100%; position: fixed; z-index: 197; top: 0px; left: 0px; overflow-x: hidden; overflow-y: hidden;"></div>');
var tempDiv = $('<div id="fullScreen_closeBar" style="display: none; background: gray; width: 100%; height: 27px; position: fixed; z-index: 198; top: 0px; left: 0px; overflow-x: hidden; overflow-y: hidden;"><input style="float:right;margin: 0px; padding: 5px 10px; border: 0px; background-color: #F7941D; color: white; font-size: 14px; cursor: default;" type="button" id="closeFullScreen" value="关闭" /></div>');
$(document.body).append(backDiv);
$(document.body).append(tempDiv);
}

$("#closeFullScreen").click(function() {
that.CloseFullScreen();
});

div = $("#" + divId);

background = div.css("background");

width = div.css("width");
height = div.css("height");
position = div.css("position");
zindex = div.css("z-index");
top = div.css("top");
left = div.css("left");

margintop = div.css("margin-top");
marginleft = div.css("margin-left");
marginright = div.css("margin-right");
marginbottom = div.css("margin-bottom");

$("#fullScreen_backDiv").show(500);
$("#fullScreen_closeBar").show(700);
div.hide();
div.css("background", "#FFFFFF");
div.css("width", "100%");
div.css("height",($(window).height()-27)+"px");
div.css("position", "fixed");
div.css("z-index", "199");
div.css("top", "27px");
div.css("left", "0px");
div.css("margin-top", "0px");
div.css("margin-left", "0px");
div.css("margin-right", "0px");
div.css("margin-bottom", "0px");
div.show(1000);
}

//关闭全屏
this.CloseFullScreen = function() {

div.hide();
div.css("background", background);
div.css("width", width);
div.css("height", height);
div.css("position", position);
div.css("z-index", zindex);
div.css("top", top);
div.css("left", left);
div.css("margin-top", margintop);
div.css("margin-left", marginleft);
div.css("margin-right", marginright);
div.css("margin-bottom", marginbottom);

$("#fullScreen_closeBar").hide(500);
$("#fullScreen_backDiv").hide(500);

div.show(500);
}
}

var fullScreen = new FullScreen();
============================================================
html
--------
<script type="text/javascript">
function doQuery() {
document.form1.action = "${path}/business/pol/index/policyreturnquery?type=query";
document.form1.submit();
}
$(function() {
fixTable.FixTable("mytable");
$("#fullScreen").click(function() {
fullScreen.FullScreen("mylist");
});
})
</script>
<a href="####" id="fullScreen"><span> <img
src="${path}/statics/images/qp.gif"
style="margin-right: 4px; margin-bottom: -3px;" />全屏</span> </a>
</div>
-------------------------------------------------------
<table id="mytable" cellpadding="0" cellspacing="0"
class="dg_borderstyle trStyleTable"
style="margin-top: 0px; text-align: center;">
<tr>
<th>
<span>投保单号</span>
</th>
</tr>
</table>