jsp页面固定table头

最新推荐文章于 2020-09-15 17:10:23 发布

释道儒

最新推荐文章于 2020-09-15 17:10:23 发布

阅读量745

点赞数

分类专栏： web前台

本文链接：https://blog.csdn.net/shidaoru/article/details/12971465

版权

页面直接调用：

 
 
 
   
  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;  </