jQuery's method of freezing table headers

jQuery's method of freezing table headers_jquery

WBOY

Release： 2016-05-16 16:10:57

Original

1290 people have browsed it

The example in this article describes how jQuery implements frozen table headers. Share it with everyone for your reference. The details are as follows:

When I was working on a project some time ago, I needed to display a list, but because there was too much data, the table header had to be frozen when scrolling, so I wrote the following script (I also found the corresponding script on the Internet, but not very much) Ideal, so I wrote it myself, but currently, because the project only uses the freezing of table headers, and does not need to specify column freezing, it can only be regarded as an incomplete script at present, but generally it can be used only if the table header is frozen), Now take a look at the screenshot:

This achieves the freezing of the table header, and the content of the table body below can be freely scrolled

Look at the code:

Copy code The code is as follows:

//Extend a CloneTableHeader method for jquery

jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {

//Get the DIV where the frozen header is located, if the DIV already exists, remove it

var obj = document.getElementById("tableHeaderDiv" tableId);

If (obj) {

jQuery(obj).remove();

} 

var browserName = navigator.appName;//Get browser information, which is used to distinguish browsers in subsequent codes 

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 content

var table = tableOrg.clone();//Clone table content

table.attr("id", "cloneTable");

//Note: You need to put the header to be frozen 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();

});//Dynamicly 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 according to 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 the frozen header and set the properties 

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 let’s see how to use it:

Just add the following script to the page

Copy code The code is as follows:

That's it. It's OK to pass in the table and the ID of the DIV where the table is located. It must be noted that the header to be frozen must be placed in thead, otherwise freezing cannot be achieved.

The above code passes the test in IE6, 7, and 8, but FF and Chrome will have the problem of inaccurate header width.

Click here for the complete example codeDownload from this site.

I hope this article will be helpful to everyone’s jQuery programming.