Table head fixed should be a more useful function, reference to a few examples on the web, in a few common browsers display is not perfect. And many of them are based on a fixed table, in the encoding of more than a fixed table head, for the dynamically generated tables do not know how many columns. And most of the examples can only meet the limit of the height of the situation, if the limit width, there are horizontal scroll bar can not.
My goal is to find a table that exists on the page like Jquery-ui, and call a method to implement the fixed header function. Take advantage of the opportunity to learn to write jquery plug-ins, you write a fixed table head plug-in.
As with Plug-ins in Jquery-ui, you need only one line of code $ (' #table1 '). Fixheader ({height:100});
The following browser tests pass
IE7 IE8 firefox16.0 chrome22.0
Currently known IE9 The following can not be aligned, no IE9 on hand to debug, and then solve the idea.
Description:
1 need jquery, development test jquery-1.8.2, other versions should not be
2 The <tr> of the header part should be written in <thead>
3 The width is not limited to fit the table width automatically (assuming the scroll bar width is 20px, the actual width is table width +20px)
4 supports multiple row header fixing
5 usually all columns in the table are displayed with no horizontal scroll bar, only the function of vertical scroll bar is required. The plug-in supports table header fixation under a limited-width condition.
6 Limit width and height under the condition of fixed table head display, the table head fixed function can not be implemented simply through the CSS, need to achieve through JS, there will be a slight flicker
7 The situation where table and TH,TD border-width are set to different values has been considered
8 The events bound in the header have been considered, and the events bound in the original header remain
Special attention:IE browser, you must set the table in the TD and th border-width, otherwise can not set the column width correctly, the table header and data parts will be mangled
How to use:
Limit height: $ (' #table1 '). Fixheader ({height:100});
Limit height and Width: $ (' #table3 '). Fixheader ({height:100,width:500});
Here is the complete code
Copy Code code as follows:
/*!
* Fixheader 1.0.0
* Copyright Chokobo
*
* Make table header fixed
*
* Notice:set Th,id Border-width in IE
*
* Tested Browser:ie7 IE8 firefox16.0 chrome22.0
*/
(function ($, undefined) {
$.fn.fixheader = function (options) {
var defaults = {
Width: ',
Height: '
};
Options = $.extend ({}, defaults, options);
var elem = this;
if (Options.height = = "") {
return this;
}
var thead = elem.find (' thead ');
var fixtable = Elem.clone (). Empty (). REMOVEATTR (' id ');
Set head default Background-color
if (fixtable.css (' background-color ') = = ' Transparent ' | | fixtable.css (' background-color ') = = ') {
Fixtable.css (' Background-color ', ' #fff ');
}
Fixtable.css ({
' Position ': ' absolute ',
' Top ': ' 0px ',
' Border-bottom ': $ (' tr:eq (0) ', thead). Find (' Th:eq (0), Td:eq (0) '). CSS (' border-bottom-width ')
});
$ (' tr:eq (0) ', thead). Find (' th, TD '). each (function () {
var col = $ (this);
if ($.browser.mozilla) {
Col.width (Col.width ());
}
else if ($.browser.chrome) {
var colborderwidth = parseint (col.css (' border-width '));
Col.width (Col.width () +colborderwidth);
}
else if ($.browser.msie) {
var colborderwidth = parseint (col.css (' border-width '));
if (colborderwidth) {
Col.width (Col.width () +colborderwidth+colborderwidth/2),//ie7??
}
}
});
Make head
var dummyhead = Thead.clone ();
Thead.appendto (fixtable);
Dummyhead.prependto (Elem);
var tbodywrapper = elem.wrap (' <div class= ' body-wrapper ' ></div> '). parent ();
var tablewrapper = tbodywrapper.wrap (' <div class= "Table-wrapper" style= "position:relative;" /> '). parent ();
Settablewidth ();
Setwrappersize ();
Fixtable.prependto (Tablewrapper);
return this;
function Settablewidth () {
if ($.browser.mozilla) {
Elem.width (Elem.width ());
Fixtable.css (' width ', elem.css (' width '));
}
else if ($.browser.chrome) {
Elem.width (Elem.outerwidth ());
Fixtable.width (Elem.outerwidth ());
}
else if ($.browser.msie) {
Elem.width (Elem.outerwidth ());
Fixtable.width (Elem.outerwidth ());
}
else{
Elem.width (Elem.outerwidth ());
Fixtable.width (Elem.outerwidth ());
}
}
function Setwrappersize () {
var elemwidth = Elem.outerwidth (true);
var elemheight = Elem.outerheight (true);
var scrollbarwidth = 20;
if (Options.width = = "") {
Tbodywrapper.css ({
' Width ': (elemwidth+scrollbarwidth) + ' px ',
' Height ': options.height,
' Overflow-x ': ' Hidden ',
' overflow-y ': ' Auto '
});
}
else{
if (elemwidth <= options.width) {
Tbodywrapper.css ({
' Width ': options.width+ ' px ',
' Height ': options.height,
' Overflow-x ': ' Hidden ',
' overflow-y ': ' Auto '
});
}
else{
Tablewrapper.css ({
' Width ': options.width,
' Height ': options.height,
' Overflow ': ' Auto '
});
Tablewrapper.scroll (function () {
Fixtable.css (' Top ', tablewrapper.scrolltop () + ' px ');
});
}
}
}
};
}) (JQuery);
Copy Code code as follows:
/*
Function: Fixed table head.
Use the ID of the container to set $ ("#div"). Chromatable ({width: "100%", Height: "100%", Scrolling: "Yes"})
Table must contain <thead> tags
Parameters: No.
*/
(function ($) {
$.chromatable = {
Defaults: {
Width: "900px",//Set the width of the container, to expand the program
Height: "300px",//Set container height, to be expanded program
Scrolling: "yes"//yes with IE rolling, no fixed on the page only the container roll motion
}
};
$.fn.chromatable = function (options) {
var options = $.extend ({}, $.chromatable.defaults, options);
Return This.each (function () {
var $DIVOBJ = $ (this);
var $tableObj = $divObj. Find ("table");
var $uniqueID = $tableObj. attr ("ID") + ("wrapper");
var $class = $tableObj. attr ("class");
var $tableWidth = $tableObj. Width ();
var top = $ ("#" + $TABLEOBJ. attr ("ID"))-offset (). Top;
var left = $ (' # ' + $tableObj. attr ("ID")). Offset (). Left
$DIVOBJ. Append ("<table class=" + $class + "' id= '" + $uniqueID + "' style= ' position:absolute;top:" +top+ "Px;left:" + left+ "PX; ' width= '" + $tableWidth + "' border= ' 0 ' cellspacing= ' 0 ' cellpadding= ' 0 ' ><thead> ' +$ (" # "+$ Tableobj.attr ("ID")). Find ("Thead"). HTML () + "</thead></table>");
$.each ($ ("#" + $TABLEOBJ. attr ("ID")). Find ("thead th"), function (I,item) {
$ ("#" + $uniqueID). Find ("thead th")-eq (i). Width ($ (item). width ());
$ (item). width ($ (item). width ());
});
if (options.scrolling = = "Yes")
{
ScrollEvent ($TABLEOBJ. attr ("ID"), $uniqueID);
}
Resizeevent ($TABLEOBJ. attr ("ID"), $uniqueID);
});
function ScrollEvent (tableId, UniqueID)
{
var element = $ ("#" +uniqueid);
$ (window). Scroll (function () {
var top = $ ("#" +tableid)-offset (). Top;
var scrolls = $ (this). ScrollTop ();
if (Scrolls > top) {
if (window. XMLHttpRequest) {
Element.css ({
Position: "Fixed",
top:0
});
} else {
Element.css ({
Top:scrolls
});
}
}else {
Element.css ({
Position: "Absolute",
Top:top
});
}
});
};
function Resizeevent (tableId, UniqueID)
{
var element = $ ("#" +uniqueid);
$ (window). Resize (function () {
var top = $ ("#" +tableid)-offset (). Top;
var scrolls = $ (this). ScrollTop ();
if (Scrolls > top) {
if (window. XMLHttpRequest) {
Element.css ({
Position: "Fixed",
top:0
});
} else {
Element.css ({
Top:scrolls
});
}
}else {
Element.css ({
Position: "Absolute",
Top:top
});
}
});
}
};
}) (JQuery);
