Code for fixed table headers and column headers based on jquery_jquery

Copy code The code is as follows: // function FixTable(TableID, FixColumnNumber, width, height) { /// /// 锁定表头和列 /// sorex.cnblogs.com /// /// /// 要锁定的Table的ID /// /// /// 要锁定列的个数 /// /// /// 显示的宽度 /// /// /// 显示的高度 /// if ($("#" + TableID + "_tableLayout").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 "_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 = $("#" TableID "_tableHead thead").height(); HeadHeight = 2; $("#" TableID "_tableHead").css("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.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 "_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()) { $("#" TableID "_tableColumn").css("height", $("#" TableID "_tableColumn table").height()); $("#" TableID "_tableData").css("height", $("#" TableID "_tableColumn table").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, 200); }); // ]]> .style1 { width: 137px; } #MyTable { border-top: 1px solid #cc0000; border-left: 1px solid #cc0000; } #MyTable td,th { border-bottom:1px solid #cc0000; border-right: 1px solid #cc0000; }

-->

项目 公示栏 dddddddd 总分 语文 数学 英语 政治 历史 地理 物理 化学 生物 ss 上线时间 1 29 1 25 2 146 28 79 73 47 8 91 33 526 qq dd 在线人数 2 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 s 学生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

	项目	公示栏	dddddddd									总分
	项目	公示栏	语文数学		英语政治		历史地理		物理化学		生物	总分

ss	上线时间	1	29 1	25 2	146	28	79	73	47	8	91 33	526 qq	dd
	在线人数	2	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
s	学生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

Code for fixed table headers and column headers based on jquery_jquery

Related articles