博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jsp页面固定table头
阅读量:5878 次
发布时间:2019-06-19

本文共 4591 字,大约阅读时间需要 15 分钟。

hot3.png

 页面直接调用:

 

<script type="text/javascript">

jQuery(function() { 
jQuery.fn.CloneTableHeader("tab1", "div1");
});
</script>

 

 
  jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {       var obj = document.getElementById("tableHeaderDiv" + tableId);       if (obj) {           jQuery(obj).remove();       }       var browserName = navigator.appName;       var ver = navigator.appVersion;       var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows")));       var content = document.getElementById(tableParentDivId);       var scrollWidth = content.offsetWidth - content.clientWidth;         var tableOrg = jQuery("#" + tableId)       var table = tableOrg.clone();         table.attr("id", "cloneTable");       var tableClone = jQuery(tableOrg).find("tr").each(function() {         });       var tableHeader = jQuery(tableOrg).find("thead");       var tableHeaderHeight = tableHeader.height();       tableHeader.hide();       var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() {           return jQuery(this).width();       });       var tableCloneCols = jQuery(table).find("thead tr:first td")       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);                   else                      tableCloneCols.eq(i).width(colsWidths[i]);               } else {                   tableCloneCols.eq(i).width(colsWidths[i]);               }           }       }         var headerDiv = 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());   } 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>        <script src="jquery-1.3.2.min.js" type="text/javascript"></script>        <script src="CloneTableHeader.js" type="text/javascript"></script>        <style type="text/css">          .itemList           {               border: solid 1px #cccccc;               overflow: hidden;               width: 100%;               border-collapse: collapse;           }           .itemList td           {               padding: 0px 0px 0px 0px;               color: #444444;               border: solid 1px #cccccc;               text-align: center;               line-height: 20px;           }           .selected           {               background-color: #fdee88;           }           .hovertr           {               background-color: #fff8c7;           }           .errortd           {               border: dashed 1px red;           }       </style>      <script type="text/javascript">          jQuery(function() {               jQuery.fn.CloneTableHeader("tab1", "div1");           });       </script>  </head>  <body>      <form id="form1" runat="server">      <div style=" height: 100px; overflow:scroll;" id="div1">          <table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList">              <thead>                  <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;                       padding: 0px 0px 0px 0px;">                      <td>                          编号                       </td>                      <td>                          姓名                       </td>                      <td>                          年龄                       </td>                      <td>                          城市                       </td>                  </tr>                  <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;                       padding: 0px 0px 0px 0px;">                      <td colspan="2">身高</td>                      <td colspan="2">体重</td>                  </tr>              </thead>              <tbody>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>                  <tr>                      <td>                          1                       </td>                      <td>                          张三1                       </td>                      <td>                          22                       </td>                      <td>                          北京                       </td>                  </tr>                  <tr>                      <td colspan="2">170</td>                      <td colspan="2">99</td>                  </tr>              </tbody>          </table>      </div>      </form>  </body>  </html> 

 

本文出自 “” 博客,请务必保留此出处

转载于:https://my.oschina.net/zhangshuge/blog/633841

你可能感兴趣的文章
oracle11g 数据库导出报“ EXP-00003:
查看>>
[转载] 七龙珠第一部——第075话 龙争虎斗
查看>>
[转载] 中华典故故事(孙刚)——20 王婆卖瓜
查看>>
flash挡住了下拉菜单
查看>>
HDOJ_ACM_一只小蜜蜂
查看>>
在Fedora25上轻松安装Cuda8
查看>>
程序员们,AI来了,机会来了,危机也来了
查看>>
JavaScript基础笔记集合(转)
查看>>
解决——CSS :before、:after ,当content使用中文时有时候会出现乱码
查看>>
一致性Hash 分析和实现
查看>>
总结java中的super和this关键字
查看>>
201521123009 《Java程序设计》第11周学习总结
查看>>
可解释的机器学习
查看>>
Python3之多线程学习
查看>>
aspx页面@Page指令解析
查看>>
POJ 2002
查看>>
MVC和MTV结构分析
查看>>
每天一个linux命令:mkdir
查看>>
thinkphp总体设计
查看>>
HYPER -V 独立安装的 2016版本 中文版 下载好慢啊
查看>>