jquery table fixed header, column plugin

Original plug-in, reproduced please declare the source!!!

PS: This plugin is not efficient (focus on efficiency is not used), and then also does not support the old version of the browser (not supported CSS3 Pointer-events property is not available)

PS2: Compared to other plugins (ex: http://www.fixedheadertable.com/), the only advantage I've written about this is that it doesn't change the original table structure (actually copying the three identical tables underneath the container of the original table)

Jquery.fixedtable.js content is as follows:

/*! * jquery Copy Plugin * version:1.0.0-2018.01.31 * Requires jQuery v1.5 or later * Copyright (c) 2018 Tiac */http Www.cnblogs.com/tujia/p/8393372.html*///AMD Support(function(Factory) {"Use Strict"; if(typeofdefine = = = ' function ' &&define.amd) {//using AMD; Register as anon moduledefine ([' jquery '], factory); } Else {        //no AMD; invoke directlyFactory ((typeof(jQuery)! = ' undefined ')?Jquery:window.    Zepto); }}(function($) {"Use Strict";/*    Basic Usage:-----------Html: <div style= "height:400px; width:500px; Overflow:auto; "                        > <table class= "table" cellspacing= "0" > <thead> <tr> <th data-fixed= "true" >title</th> <th data-fixed= "true" >title& Lt;/th> <th data-fixed= "true" >title</th> <th>title</                        Th> <th>title</th> <th>title</th> <th>title</th> <th>title</th> <th>titl                        E</th> <th>title</th> <th>title</th> <th>title</th> </tr> </thead> <t        Body> ...        </tbody> </table> </div> JS: $ ('. Table '). fixedtable (); Other Usage:-----------$ ('. Table '). fixedtable ({fixedcolumns:3, offset: {left:-1, top:-1}, O    Ddcolor: ' #E3EFF5 ', Evencolor: ' #FDBDBD ',});    $ ('. Table '). Fixedtable (' hide ');    $ ('. Table '). Fixedtable (' show ');    $ ('. Table '). fixedtable (' refresh ');    $ ('. Table '). Fixedtable (' rebuild '); $ ('. Table '). Fixedtable (' destroy ');*/functionGetHeader (_this) {varotable =_this.clone (); varOthead = Otable.children (' thead '). length>0? Otable.children (' thead '):false; varOtbody = Otable.children (' tbody '). length>0? Otable.children (' tbody '): otable; varOtfoot = Otable.children (' tfoot '). length>0? Otable.children (' tfoot '):false;    Otable.width (_this.width ()); /*if (othead!=false) {otbody.remove ();    }else{Otbody.children (' tr:gt (0) '). Remove (); } if (Otfoot!=false) Otfoot.remove ();*/    varheaders = Otable.find (' tr:eq (0) '). Children (); _this.find (' Tr:eq (0) '). Children (). each (function(i) {headers.eq (i). CSS (' Width ', $ ( This). width ()); $( This). CSS (' width ', $ ( This). width ());        }); returnotable;}functionsetposition (Wrapper, Isrefresh) {varoltable = Wrapper.find ('. Ltablewrapper '). Find ('. Table:eq (0) '); varOthead = Oltable.children (' thead '). length>0? Oltable.children (' thead '):false; varOtbody = Oltable.children (' tbody '). length>0? Oltable.children (' tbody '): oltable; varOparent = Wrapper.prev (' div '); varLtablewrapper = Wrapper.find ('. Ltablewrapper ')); varLheaderwrapper = Wrapper.find ('. Lheaderwrapper ')); varRheaderwrapper = Wrapper.find ('. Rheaderwrapper ')); varoptions = oparent.data (' Options '); if(typeof(options) = = ' string ') options =json.parse (options); varSCROLLW = Oltable.height () >oparent.height ()? 16:25; Wrapper.css ({left:oParent.offset (). Left+ ((isrefresh==true? Options.refreshOffset.left:options.offset.left) | | 0), Top:oParent.offset (). Top+ ((isrefresh==true? Options.refreshOffset.top:options.offset.top) | | 0), Width:oParent.width (), Height:oParent.height ()}); varFixedWidth = 0; varFixedheight = Oparent.height ()-SCROLLW; varFixedheadwidth = Wrapper.width ()-SCROLLW; varFixedheadheight = Othead? Othead.outerheight (): Otbody.children (' tr:eq (0) '). Outerheight (); if(options.fixedcolumns==0) {fixedwidth=Fixedheadwidth; }Else{        varCells = (Othead | | otbody). Children (' tr:eq (0) '). Children (); if(Cells.eq (options.fixedcolumns-1). Offset (). left>0) {fixedwidth= Cells.eq (options.fixedcolumns-1). Offset (). Left-wrapper.offset (). Left + Cells.eq (options.fixedcolumns-1). Outerwidth (true); }Else{fixedwidth= Wrapper.outerwidth ()/cells.length* (options.fixedcolumns+1);}} ltablewrapper.height (Fixedheight);    Lheaderwrapper.height (Fixedheadheight);    Rheaderwrapper.height (Fixedheadheight); if(options.fixedcolumns==0) {ltablewrapper.width (0 ); Lheaderwrapper.width (0 );    Rheaderwrapper.width (Fixedheadwidth); }Else{ltablewrapper.width (fixedwidth);        Lheaderwrapper.width (fixedwidth); Rheaderwrapper.width (Fixedheadwidth-20 ); }}$.fn.fixedtable=function(options) {if(options===undefined) options = {}; varDefaults ={fixedcolumns:0, offset: {left:0, top:0}, Refreshoffset: {left:0, top:0}, Oddcolor:' #ffffff ', Evencolor:' #F8F8F8 '    }; if(typeof(options) = = ' object ') {Options=$.extend (defaults, options); }Else if(typeof(options) = = ' String '){        Switch(options) { Case' Show ':                 This. each (function(){                    $( This). Parent (). Next ('. Fixedtable ')). Show ();                });  Break;  Case' Hide ':                 This. each (function(){                    $( This). Parent (). Next ('. Fixedtable ')). Hide ();                });  Break;  Case' Refresh ':                 This. each (function(){                    varWrapper = $ ( This). Parent (). Next ('. Fixedtable ')); SetPosition (Wrapper,true);                });  Break;  Case' Rebuild ':                 This. fixedtable (' Destroy ');  This. EQ (0). Parent (). attr (' data-runing ', 0); varOptions = This. EQ (0). Parent (). Data (' Options '); if(typeof(options) = = ' string ') options =json.parse (options); Options.offset= {top:0, left:0};  This. fixedtable (options);  Break;  Case' Destroy ':                 This. each (function(){                    $( This). Parent (). Next ('. Fixedtable ')). Remove ();                });  Break; }        return; }     This. each (function(){        var_this = $ ( This); varOparent =_this.parent (); varObody = _this.children (' tbody '). length>0? _this.children (' tbody '): _this; Obody.children (' Tr:odd '). CSS (' Background-color '), Options.oddcolor); Obody.children (' Tr:even '). CSS (' Background-color '), Options.evencolor); varLheader =GetHeader (_this); varRheader =Lheader.clone (); varOltable =_this.clone (); varOthead = Oltable.children (' thead '). length>0? Oltable.children (' thead '):false; varOtbody = Oltable.children (' tbody '). length>0? Oltable.children (' tbody '): oltable; varOtfoot = Oltable.children (' tfoot '). length>0? Oltable.children (' tfoot '):false;        Oltable.width (_this.width ()); varFixedcolumns = (Othead | | otbody). Children (' tr:eq (0) '). Find (' [data-fixed= ' true '] '). Length | |Options.fixedcolumns; Options.fixedcolumns=Fixedcolumns; if(Oparent.attr (' data-runing ') ==1) {Oparent.next ('. Fixedtable '). Remove (); }Else{oparent.attr (' Data-runing ', 1); Oparent.attr (' Data-options ', Json.stringify (options)); }        varWrapper = $ (' <div class= "fixedtable" style= "Position:absolute;top:0;left:0;overflow:hidden;pointer-events:none" ></div> '); varLtablewrapper = $ (' <div class= "Ltablewrapper" style= "Position:absolute;top:0;left:0;overflow:hidden" ></ Div> '); varLheaderwrapper = $ (' <div class= "Lheaderwrapper" style= "Position:absolute;top:0;left:0;overflow:hidden" ></ Div> '); varRheaderwrapper = $ (' <div class= "Rheaderwrapper" style= "Position:absolute;top:0;left:0;overflow:hidden" ></ Div> ');        Ltablewrapper.append (oltable);        Lheaderwrapper.append (Lheader);        Rheaderwrapper.append (Rheader);        Oparent.after (wrapper);        Wrapper.append (Ltablewrapper). Append (Rheaderwrapper). Append (Lheaderwrapper);        SetPosition (wrapper);        Rheaderwrapper.scrollleft (Oparent.scrollleft ());        Ltablewrapper.scrolltop (Oparent.scrolltop ());        Rheaderwrapper.scrolltop (Oparent.scrolltop ()); Oparent.unbind (' scroll '). On (' scroll ',function(){            varSl= This. scrollleft,st= This. Scrolltop,d=json.parse ($ ( This). attr (' SLT ') | | ' {}‘); if(sl!=D.SL) {Rheaderwrapper.scrollleft ($ ( This). ScrollLeft ()); }            if(St!=d.st && fixedcolumns>0) {ltablewrapper.scrolltop ($ ( This). scrolltop ()); }            $( This). attr (' SLT ', Json.stringify ({sl:sl,st:st}));    }); });};}));

jquery table fixed header, column plugin