Example code _ jQuery

JQuery implements the instance code with fixed table header effects. For more information, see section 1. Create a js file jQuery_FixedTableHead.js.

The content is as follows:

The Code is 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 ("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 ());

}

Ii. Html instance files

The content is as follows:

The Code is as follows:

Qubernet@163.com _ jQuery to achieve the fixed effect of the header (quite good !!!)