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

1、冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器 new document script type=text/javascript src=:/!- function FixTable(TableID, FixColumnNumber, width, height) / / 锁定表头和列 / / / / 要锁定的Table的ID / / / 要锁定列的个数 / / / 显示的宽度 / / / 显示的高度 / if ($(# + TableID + _tableLa

2、yout).length != 0) $(# + TableID + _tableLayout).before($(# + TableID); $(# + TableID + _tableLayout).empty(); else $(# + TableID).after(); $( + + + ).appendTo(# + TableID + _tableLayout); var oldtable = $(# + TableID); var tableFixClone = oldtable.clone(true); tableFixClone.attr(id, TableID + _tabl

3、eFixClone); $(# + 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 + _tableColu

4、mnClone); $(# + TableID + _tableColumn).append(tableColumnClone); $(# + TableID + _tableData).append(oldtable); $(# + TableID + _tableLayout table).each(function () $(this).css(margin, 0); ); var HeadHeight = $(# + TableID + _tableHead thead).height(); HeadHeight += 2; $(# + TableID + _tableHead).cs

5、s(height, HeadHeight); $(# + TableID + _tableFix).css(height, HeadHeight); var ColumnsWidth = 0; var ColumnsNumber = 0; $(# + TableID + _tableColumn tr:last td:lt( + FixColumnNumber + ).each(function () ColumnsWidth += $(this).outerWidth(true); ColumnsNumber+; ); ColumnsWidth += 2; if ($.browser.msi

6、e) 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 () $(#

7、+ 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).

8、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: widt

9、h, height: height, position: relative, z-index: 35 ); 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

10、); if ($(# + TableID + _tableColumn).height() $(# + TableID + _tableColumn table).height() $(# + TableID + _tableColumn).css(height, $(# + TableID + _tableColumn table).height(); $(# + TableID + _tableData).css(height, $(# + TableID + _tableColumn table).height() + 17); $(# + TableID + _tableFix).of

11、fset($(# + TableID + _tableLayout).offset(); $(# + TableID + _tableHead).offset($(# + TableID + _tableLayout).offset(); $(# + TableID + _tableColumn).offset($(# + TableID + _tableLayout).offset(); $(# + TableID + _tableData).offset($(# + TableID + _tableLayout).offset();$(document).ready(function ()

12、 FixTable(MyTable, 2, 600, 400); );/-鸣谢原文转自a href=:/ 姓名 班级 成绩 主科 文科 理科 总分 语文 数学 英语 政治 历史 地理 物理 化学 生物 !- 姓名 班级 语文 数学 英语 政治 历史 地理 物理 化学 生物 总分 - 学生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