This article illustrates the method of implementing a frozen header in jquery. Share to everyone for your reference. Specifically as follows:
Some time ago when doing a project because you need to display a list, but because the data is too much in the scrolling time the header must be frozen, so write the following script (once also found the corresponding script on the Web, but not ideal so I wrote it, but now because the project is only the use of the table head freeze, Instead of the need to specify a column freeze so currently only an incomplete script, but the general only need to use the table head freeze can be used, now first look at the screenshot:
This enables the head to freeze, and the contents of the table below can be scrolled freely
Look at the code:
Copy Code code as follows:
Extend a Clonetableheader method for jquery
JQuery.fn.CloneTableHeader = function (TableId, tableparentdivid) {
Gets the div where the header is frozen, and removes the div if it already exists
var obj = document.getElementById ("Tableheaderdiv" + tableId);
if (obj) {
JQuery (obj). Remove ();
}
var browsername = navigator.appname;//Get browser information for subsequent 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);//Get table contents
var table = Tableorg.clone ()//Clone table contents
TABLE.ATTR ("id", "clonetable");
Note: You need to put the header you want to freeze into 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 gets the width of each column
var tableclonecols = jQuery (table). Find ("Thead tr:first TD")
if (colswidths.size () > 0) {//According to the browser for the frozen header width assignment (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 that freezes the header and set the property
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 ());
}
The above is the complete code, now look at how to use:
Just add the following script to the page
Copy Code code as follows:
<script type= "Text/javascript" >
JQuery (function () {
JQuery.fn.CloneTableHeader ("Tab1", "Div1");
});
</script>
So it's OK, the ID of the div that comes in the table and the table is okay, and it must be noted that the header to be frozen must be placed in the THEAD, otherwise the freeze cannot be achieved.
The above code passes in the ie6,7,8 test, and FF and Chrome will have the problem of inaccurate width of the header.
Full instance code click here to download the site.
I hope this article will help you with your jquery programming.
