冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx

上传人:b****5 文档编号:29896307 上传时间:2023-08-03 格式:DOCX 页数:33 大小:17.40KB
下载 相关 举报
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx_第1页
第1页 / 共33页
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx_第2页
第2页 / 共33页
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx_第3页
第3页 / 共33页
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx_第4页
第4页 / 共33页
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx_第5页
第5页 / 共33页
点击查看更多>>
下载资源
资源描述

冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx

《冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx》由会员分享,可在线阅读,更多相关《冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx(33页珍藏版)》请在冰豆网上搜索。

冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器.docx

冻结锁定固定行列表头抬头htmltablejquery全兼容常见浏览器

冻结锁定固定行列表头抬头htmltablejquery全兼容常见浏览器

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":

//.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//.w3.org/1999/xhtml">

newdocument

--

functionFixTable(TableID,FixColumnNumber,width,height){

///

///锁定表头和列

///

///

///

///要锁定的Table的ID

///

///

///要锁定列的个数

///

///

///显示的宽度

///

///

///显示的高度

///

if($("#"+TableID+"_tableLayout").length!

=0){

$("#"+TableID+"_tableLayout").before($("#"+TableID));

$("#"+TableID+"_tableLayout").empty();

}

else{

$("#"+TableID).after("

hidden;height:

"+height+"px;width:

"+width+"px;'>

");

}

$('

'

+''

+''

+'').appendTo("#"+TableID+"_tableLayout");

varoldtable=$("#"+TableID);

vartableFixClone=oldtable.clone(true);

tableFixClone.attr("id",TableID+"_tableFixClone");

$("#"+TableID+"_tableFix").append(tableFixClone);

vartableHeadClone=oldtable.clone(true);

tableHeadClone.attr("id",TableID+"_tableHeadClone");

$("#"+TableID+"_tableHead").append(tableHeadClone);

vartableColumnClone=oldtable.clone(true);

tableColumnClone.attr("id",TableID+"_tableColumnClone");

$("#"+TableID+"_tableColumn").append(tableColumnClone);

$("#"+TableID+"_tableData").append(oldtable);

$("#"+TableID+"_tableLayouttable").each(function(){

$(this).css("margin","0");

});

varHeadHeight=$("#"+TableID+"_tableHeadthead").height();

HeadHeight+=2;

$("#"+TableID+"_tableHead").css("height",HeadHeight);

$("#"+TableID+"_tableFix").css("height",HeadHeight);

varColumnsWidth=0;

varColumnsNumber=0;

$("#"+TableID+"_tableColumntr:

lasttd:

lt("+FixColumnNumber+")").each(function(){

ColumnsWidth+=$(this).outerWidth(true);

ColumnsNumber++;

});

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+"_tableData").scroll(function(){

$("#"+TableID+"_tableHead").scrollLeft($("#"+TableID+"_tableData").scrollLeft());

$("#"+TableID+"_tableColumn").scrollTop($("#"+TableID+"_tableData").scrollTop());

});

$("#"+TableID+"_tableFix").css({"overflow":

"hidden","position":

"relative","z-index":

"50","background-color":

"Silver"});

$("#"+TableID+"_tableHead").css({"overflow":

"hidden","width":

width-17,"position":

"relative","z-index":

"45","background-color":

"Silver"});

$("#"+TableID+"_tableColumn").css({"overflow":

"hidden","height":

height-17,"position":

"relative","z-index":

"40","background-color":

"Silver"});

$("#"+TableID+"_tableData").css({"overflow":

"scroll","width":

width,"height":

height,"position":

"relative","z-index":

"35"});

if($("#"+TableID+"_tableHead").width()>$("#"+TableID+"_tableFixtable").width()){

$("#"+TableID+"_tableHead").css("width",$("#"+TableID+"_tableFixtable").width());

$("#"+TableID+"_tableData").css("width",$("#"+TableID+"_tableFixtable").width()+17);

}

if($("#"+TableID+"_tableColumn").height()>$("#"+TableID+"_tableColumntable").height()){

$("#"+TableID+"_tableColumn").css("height",$("#"+TableID+"_tableColumntable").height());

$("#"+TableID+"_tableData").css("height",$("#"+TableID+"_tableColumntable").height()+17);

}

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

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

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

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

}

$(document).ready(function(){

FixTable("MyTable",2,600,400);

});

//-->

鸣谢原文转自


//


style="border-bottom-color:

black;border-top-color:

black;width:

1000px;color:

#000000;border-right-color:

black;font-size:

medium;border-left-color:

black"

id="MyTable"

border="1"

cellspacing="0"

cellpadding="0"

>

center;width:

80px"rowspan="3">

姓名

center;width:

80px"rowspan="3">

班级

center"colspan="10">

成绩

center"colspan="3">

主科

center"colspan="3">

文科

center"colspan="3">

理科

center;width:

80px"rowspan="2">

总分

center;width:

80px">

语文

center;width:

80px">

数学

center;width:

80px">

英语

center;width:

80px">

政治

center;width:

80px">

历史

center;width:

80px">

地理

center;width:

80px">

物理

center;width:

80px">

化学

center;width:

80px">

生物

--

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

姓名

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

班级

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

语文

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

数学

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

英语

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

政治

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

历史

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

地理

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

物理

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

化学

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

生物

80px;text-align:

center;"_mce_style="width:

80px;text-align:

center;">

总分

-->

--数据行-->

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

47

8

91

526

学生32

班级1

29

25

146

28

79

73

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 经管营销 > 经济市场

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1