Code of fixed table header Based on jQuery (IE6, passed the test) _ jquery

Currently, you can only calculate an incomplete script. However, generally you only need to freeze the header to use a project for a certain period of time because a list needs to be displayed, however, because the table header must be frozen when there is too much data to scroll, the following script is written. (I used to find the corresponding script on the Internet, but it is not ideal, so I wrote it myself, however, currently, the project only uses the freeze of the table header, but does not need to specify the column freeze. Currently, only an incomplete script can be used. However, you only need to freeze the table header ), now let's take a look:


In this way, the table header is frozen and the content of the following table can be freely rolled.
Check the Code:
// Extension of the CloneTableHeader Method for jquery

The Code is as follows:

JQuery. fn. CloneTableHeader = function (tableId, tableParentDivId ){
// Obtain the DIV of the frozen header. If the DIV already exists, remove it.
Var obj = document. getElementById ("tableHeaderDiv" + tableId );
If (obj ){
JQuery (obj). remove ();
}
Var browserName = navigator. appName; // obtain the browser information, which is used by the following code to differentiate the browser
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); // obtain table content
Var table = tableOrg. clone (); // clone table content
Table. attr ("id", "cloneTable ");
// Note: the header to be frozen should be placed in thead.
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 ();
}); // Dynamically obtain the width of each column
Var tableCloneCols = jQuery (table). find ("thead tr: first td ")
If (colsWidths. size ()> 0) {// assign a value to the frozen header width based on the browser (mainly to distinguish IE8)
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]);
}
}
}
// Create a DIV container for freezing the header and set the attributes
Var headerDiv = document. createElement ("p ");
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 ());
}

The above is the complete code. Now let's take a look at how to use it:
Add the following script to the page.

The Code is as follows: