jsp页面固定table头

2024-12-30 技术教程

页面直接调用：

jQuery.fn.CloneTableHeader=function(tableId,tableParentDivId){ varobj=document.getElementById("tableHeaderDiv"+tableId); if(obj){ jQuery(obj).remove(); } varbrowserName=navigator.appName; varver=navigator.appVersion; varbrowserVersion=parseFloat(ver.substring(ver.indexOf("MSIE")+5,ver.lastIndexOf("Windows"))); varcontent=document.getElementById(tableParentDivId); varscrollWidth=content.offsetWidth-content.clientWidth; vartableOrg=jQuery("#"+tableId) vartable=tableOrg.clone(); table.attr("id","cloneTable"); vartableClone=jQuery(tableOrg).find("tr").each(function(){ }); vartableHeader=jQuery(tableOrg).find("thead"); vartableHeaderHeight=tableHeader.height(); tableHeader.hide(); varcolsWidths=jQuery(tableOrg).find("tbodytr:firsttd").map(function(){ returnjQuery(this).width(); }); vartableCloneCols=jQuery(table).find("theadtr:firsttd") if(colsWidths.size()>0){ for(i=0;i<tableCloneCols.size();i++){ if(i==tableCloneCols.size()-1){ if(browserVersion==8.0) tableCloneCols.eq(i).width(colsWidths[i]+scrollWidth); elsetableCloneCols.eq(i).width(colsWidths[i]); }else{ tableCloneCols.eq(i).width(colsWidths[i]); } } } varheaderDiv=document.createElement("div"); headerDiv.appendChild(table[0]); jQuery(headerDiv).css("height",tableHeaderHeight); jQuery(headerDiv).css("overflow","hidden"); jQuery(headerDiv).css("z-index","20"); jQuery(headerDiv).css("width","100%"); jQuery(headerDiv).attr("id","tableHeaderDiv"+tableId); jQuery(headerDiv).insertBefore(tableOrg.parent()); }

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="jquery-1.3.2.min.js"type="text/javascript"></script><scriptsrc="CloneTableHeader.js"type="text/javascript"></script><styletype="text/css">.itemList { border:solid1px#cccccc; overflow:hidden; width:100%; border-collapse:collapse; } .itemListtd { padding:0px0px0px0px; color:#444444; border:solid1px#cccccc; text-align:center; line-height:20px; } .selected { background-color:#fdee88; } .hovertr { background-color:#fff8c7; } .errortd { border:dashed1pxred; } </style><scripttype="text/javascript">jQuery(function(){ jQuery.fn.CloneTableHeader("tab1","div1"); }); </script></head><body><formid="form1"runat="server"><divstyle="height:100px;overflow:scroll;"id="div1"><tablecellpadding="0"id="tab1"cellspacing="0"border="0"class="itemList"><thead><trstyle="background-color:#eeeeee;margin:0px;line-height:20px;font-weight:bold; padding:0px0px0px0px;"><td>编号 </td><td>姓名 </td><td>年龄 </td><td>城市 </td></tr><trstyle="background-color:#eeeeee;margin:0px;line-height:20px;font-weight:bold; padding:0px0px0px0px;"><tdcolspan="2">身高</td><tdcolspan="2">体重</td></tr></thead><tbody><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr><tr><td>1 </td><td>张三1 </td><td>22 </td><td>北京 </td></tr><tr><tdcolspan="2">170</td><tdcolspan="2">99</td></tr></tbody></table></div></form></body></html>