jquery implementation of the table header fixed effect example "with complete demo source download" _jquery

The example of this article describes the effect of the table head fixation implemented by jquery. Share to everyone for your reference, specific as follows:

The screenshot of the running effect is as follows:

The following steps are implemented:

One, a new JS file jquery_fixedtablehead.js

The contents are as follows:

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 ());

 }

Second, HTML instance files

The contents are as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Full instance code click here to download the site.

More interested readers of jquery-related content can view the site topics: "JQuery table (table) Operation Tips Summary", "jquery form operation Tips", "jquery common Plug-ins and Usage summary", "jquery operation JSON data tips Summary," jquery Extended Skills Summary, jquery drag-and-drop effects and tips, summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.