1. Create a js file jQuery_FixedTableHead.js
The content is as follows:
Copy codeThe 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 ("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 ());
}
Ii. Html instance files
The content is as follows:
Copy codeThe Code is as follows: <! 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> qubernet@163.com _ jQuery achieve the fixed effect of the header (pretty good !!!) </Title>
<Script src = "jquery-1.3.2.min.js" type = "text/javascript"> </script>
<Script src = "jQuery_FixedTableHead.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;
}
</Style>
<Script type = "text/javascript">
JQuery (function (){
JQuery. fn. CloneTableHeader ("tab1", "div1 ");
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div style = "height: 250px; overflow: scroll;" id = "div1">
<Table cellpadding = "0" id = "tab1" cellspacing = "0" border = "0" class = "itemList">
<Thead>
<Tr style = "background-color: # eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
Padding: 0px 0px 0px 0px; ">
<Td>
Column 1
</Td>
<Td>
Column 2
</Td>
<Td>
Column 3
</Td>
<Td>
Column 4
</Td>
</Tr>
</Thead>
<Tbody>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
<Tr> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> <td> I'm a test data row ............ </Td> </tr>
</Tbody>
</Table>
</Div>
</Form>
</Body>
</Html>
Note: Remember to introduce the jQuery class library file.