熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery實現表頭固定效果的實例代碼

2013-11-15 12:11:23  來源: JSP教程 

  一新建一js文件jQuery_FixedTableHeadjs

  內容如下

代碼如下:
jQueryfnCloneTableHeader = function(tableId tableParentDivId) {

  var obj = documentgetElementById("tableHeaderDiv" + tableId);

  if (obj) {

  jQuery(obj)remove();

  }

  var browserName = navigatorappName;

  var ver = navigatorappVersion;

  var browserVersion = parseFloat(versubstring(verindexOf("MSIE") + verlastIndexOf("Windows")));

  var content = documentgetElementById(tableParentDivId);

  var scrollWidth = contentoffsetWidth contentclientWidth;

  var tableOrg = jQuery("#" + tableId)

  var table = tableOrgclone();

  tableattr("id" "cloneTable");

  var tableClone = jQuery(tableOrg)find("tr")each(function() {

  });

  var tableHeader = jQuery(tableOrg)find("thead");

  var tableHeaderHeight = tableHeaderheight();

  tableHeaderhide();

  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 (colsWidthssize() > ) {

  for (i = ; i < tableCloneColssize(); i++) {

  if (i == tableCloneColssize() ) {

  if (browserVersion == )

  tableCloneColseq(i)width(colsWidths[i] + scrollWidth);

  else

  tableCloneColseq(i)width(colsWidths[i]);

  } else {

  tableCloneColseq(i)width(colsWidths[i]);

  }

  }

  }

  var headerDiv = documentcreateElement("div");

  headerDivappendChild(table[]);

  jQuery(headerDiv)css("height" tableHeaderHeight);

  jQuery(headerDiv)css("overflow" "hidden");

  jQuery(headerDiv)css("zindex" "");

  jQuery(headerDiv)css("width" "%");

  jQuery(headerDiv)attr("id" "tableHeaderDiv" + tableId);

  jQuery(headerDiv)insertBefore(tableOrgparent());

  二Html實例文件

  內容如下

 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "

  <html xmlns="

  <head runat="server">

  <title>qubernet@com_jQuery實現表頭固定效果(挺不錯的!!!)</title>

  <script src="jqueryminjs" type="text/javascript"></script>

  <script src="jQuery_FixedTableHeadjs" type="text/javascript"></script>

  <style type="text/css">

  itemList

  {

  border: solid px #cccccc;

  overflow: hidden;

  width: %;

  bordercollapse: collapse;

  }

  itemList td

  {

  padding: px px px px;

  color: #;

  border: solid px #cccccc;

  textalign: center;

  lineheight: px;

  }

  </style>

  <script type="text/javascript">

  jQuery(function() {

  jQueryfnCloneTableHeader("tab" "div");

  });

  </script>

  </head>

  <body>

  <form id="form" runat="server">

  <div style=" height: px; overflow:scroll;" id="div">

  <table cellpadding="" id="tab" cellspacing="" border="" class="itemList">

  <thead>

  <tr style="backgroundcolor: #eeeeee; margin: px; lineheight: px; fontweight: bold;

  padding: px px px px;">

  <td>

  列

  </td>

  <td>

  列

  </td>

  <td>

  列

  </td>

  <td>

  列

  </td>

  </tr>

  </thead>

  <tbody>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  <tr><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td><td>我是測試的數據行…………</td></tr>

  </tbody>

  </table>

  </div>

  </form>

  </body>

  </html>

  注意記得引入jQuery類庫文件


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20454.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.