jquery_jquery를 기반으로 하는 고정 테이블 헤더 및 열 헤더에 대한 코드

코드 복사 코드는 다음과 같습니다. // 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 테이블").each(function () { $(this).css("margin", "0"); }); var HeadHeight = $("#" TableID "_tableHead thead").height(); 머리 높이 = 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 ; }); 열 너비 = 2; if ($.browser.msie) { switch ($.browser.version) { case "7.0": if (ColumnsNumber >= 3) ColumnsWidth--; 휴식; case "8.0": if (ColumnsNumber >= 2) ColumnsWidth--; 휴식; } } $("#" 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", "ground-color": " 은" }); $("#" TableID "_tableHead").css({ "overflow": "hidden", "width": 너비 - 17, "position": "relative", "z-index": "45" , "배경색": "은색" }); $("#" TableID "_tableColumn").css({ "overflow": "hidden", "height": 높이 - 17, "position": "relative", "z-index": "40" , "배경색": "은색" }); $("#" TableID "_tableData").css({ "overflow": "scroll", "width": 너비, "height": 높이, "position": "relative", "z-index" : "35" }); if ($("#" TableID "_tableHead").width() > $("#" TableID "_tableFix table").width()) { $("#" TableID "_tableHead" ).css("너비", $("#" TableID "_tableFix 테이블").width()); $("#" TableID "_tableData").css("width", $("#" TableID "_tableFix 테이블").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 { 너비: 137px; } #MyTable { border-top: 1px solid #cc0000; 테두리 왼쪽: 1px 단색 #cc0000; } #MyTable td,th { border-bottom:1px solid #cc0000; 테두리 오른쪽: 1px 단색 #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 school生32 班级1 29 25 146 28 79 73 47 8 91 526 s school生32 班级1 29 25 146 28 79 73 47 8 91 526 school生32 班级1 29 25 146 28 79 73 47 8 91 526 school生32 班级1 29 25 146 28 79 73 47 8 91 526 school生32 班级1 29 25 146 28 79 73 47 8 91 526 school生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
	school生32	班级1	29	25	146	28	79	73	47	8	91	526
s	school生32	班级1	29	25	146	28	79	73	47	8	91	526
	school生32	班级1	29	25	146	28	79	73	47	8	91	526
	school生32	班级1	29	25	146	28	79	73	47	8	91	526
	school生32	班级1	29	25	146	28	79	73	47	8	91	526
	school生32	班级1	29	25	146	28	79	73	47	8	91	526

jquery_jquery를 기반으로 하는 고정 테이블 헤더 및 열 헤더에 대한 코드

관련 기사