jquery implementation freezes table rows and columns _jquery

Customer requirements for the first few rows of table data or the first few columns to freeze, that is, when scrolling to keep these rows/columns do not move, through the Internet to find code, reference to the idea of existing code, to achieve any row, the column to freeze.

Implementation principle:

Create multiple Div,div through the CSS implementation cascade, each div placed the current table clone. For example, when you need a row freeze, create a div that holds a frozen row table, and then freeze the row table at the top of the data table by setting the Z-index property and the Position property. Similarly, when you want a column freeze, create a div that holds the frozen column table and place it on the top of the data table. If you want the rows and columns to freeze, in addition to creating a frozen row, frozen column table Div, you will also need to create the upper left corner of the fixed row table Div, and placed at the top of all div.
Handles scrolling events for tables, while scrolling horizontally or vertically, allowing the corresponding frozen rows and frozen columns to scroll synchronously.
Handle HTML resize events, synchronizing changes to the scrolling area width and height of the table

The code is as follows:

* * Lock Header and column * * parameter definition * table-the table element to be locked or the table ID * Freezerownum-the number of rows to be locked, if the row is not locked, set to 0 * freezecolumnnum-to lock The number of columns in the first few columns and, if the column is not locked, set to 0 * Width-the scrolling area width of the table * height-the scrolling area height of the table/function freezetable (table, Freezerownum, Freezeco Lumnnum, width, height) {if (typeof (freezerownum) = = ' String ') Freezerownum = parseint (freezerownum) if (Typ
  EOF (freezecolumnnum) = = ' String ') Freezecolumnnum = parseint (Freezecolumnnum) var tableId;
    if (typeof (table) = = ' String ') {tableId = table;
  Table = $ (' # ' + tableId);
    
  else TableId = table.attr (' id ');
  
  var divtablelayout = $ ("#" + tableId + "_tablelayout");
    if (divtablelayout.length!= 0) {divtablelayout.before (table);
  Divtablelayout.empty (); else {table.after ("<div id= '" + tableId + "_tablelayout ' style= ' overflow:hidden;height:" + height + "px; Width: "+ width +" px;
    
    ></div> ");
  Divtablelayout = $ ("#" + tableId + "_tablelayout");
var html = ';  if (Freezerownum > 0 && freezecolumnnum > 0) html = ' <div id= ' + tableId + ' _tablefix ' style= ' pad ding:0px; "
    
  ></div> '; if (Freezerownum > 0) HTML + = ' <div id= ' + tableId + ' _tablehead ' style= ' padding:0px;
    
  ></div> '; if (Freezecolumnnum > 0) HTML + = ' <div id= ' + tableId + ' _tablecolumn ' style= ' padding:0px;
    
  ></div> '; html + + ' <div id= ' + tableId + ' _tabledata ' style= ' padding:0px;
  
  
  ></div> ';
  
  $ (HTML). Appendto ("#" + tableId + "_tablelayout"); var divtablefix = freezerownum > 0 && freezecolumnnum > 0?
  $ ("#" + tableId + "_tablefix"): null; var divtablehead = freezerownum > 0?
  $ ("#" + tableId + "_tablehead"): null; var divtablecolumn = freezecolumnnum > 0?
  $ ("#" + tableId + "_tablecolumn"): null;
  
  var divtabledata = $ ("#" + tableId + "_tabledata");
  
  Divtabledata.append (table); if (Divtablefix!= null) {var tablefixclone = table.clOne (true);
    TABLEFIXCLONE.ATTR ("id", TableId + "_tablefixclone");
  Divtablefix.append (Tablefixclone);
    } if (Divtablehead!= null) {var tableheadclone = Table.clone (true);
    TABLEHEADCLONE.ATTR ("id", TableId + "_tableheadclone");
  Divtablehead.append (Tableheadclone);
    } if (Divtablecolumn!= null) {var tablecolumnclone = Table.clone (true);
    TABLECOLUMNCLONE.ATTR ("id", TableId + "_tablecolumnclone");
  Divtablecolumn.append (Tablecolumnclone);
  
  } $ ("#" + tableId + "_tablelayout table"). CSS ("margin", "0");
    if (Freezerownum > 0) {var headheight = 0;
    var ignorerownum = 0; $ ("#" + tableId + "_tablehead tr:lt (" + Freezerownum +) "). each (function () {if (Ignorerownum > 0) Igno
      rerownum--;
        else {var td = $ (this). Find (' Td:first, Th:first ');
        
        Headheight + + td.outerheight (true);
        Ignorerownum = td.attr (' RowSpan '); if (typeof (ignorerownum) = = ' undefined ') ignorerownum = 0;
      else Ignorerownum = parseint (ignorerownum)-1;
    }
    });
    
    Headheight + 2;
    Divtablehead.css ("height", headheight);
  Divtablefix!= null && divtablefix.css ("height", headheight);
    } if (Freezecolumnnum > 0) {var columnswidth = 0;
    var columnsnumber = 0; $ ("#" + tableId + "_tablecolumn tr:eq (" + Freezerownum + ")"). Find ("td:lt (" + Freezecolumnnum + "), Th:lt (" + freezecolumn
        
      Num + ")"). each (function () {if (Columnsnumber >= freezecolumnnum) return;
      
      Columnswidth + = $ (this). Outerwidth (True); Columnsnumber + = $ (this). attr (' ColSpan ')?
    parseint ($ (this). attr (' ColSpan ')): 1;
    });

    Columnswidth + 2;
    Divtablecolumn.css ("width", columnswidth);
  Divtablefix!= null && divtablefix.css ("width", columnswidth); } divtabledata.scroll (function () {Divtablehead!= null && divtablehead.scrollleft (Divtabledata.scrollle
    
    ft ()); DivtaBlecolumn!= null && divtablecolumn.scrolltop (Divtabledata.scrolltop ());
  
  });
  Divtablefix!= null && divtablefix.css ({"Overflow": "Hidden", "position": "Absolute", "Z-index": "50"}); Divtablehead!= null && divtablehead.css ({"Overflow": "Hidden", "width": width-17, "position": "Absolute", "z-i
  Ndex ":" 45 "}); Divtablecolumn!= null && divtablecolumn.css ({"Overflow": "Hidden", "height": height-17, "position": "Absolute"
  , "Z-index": "40"});
  
  Divtabledata.css ({"Overflow": "Scroll", "width": width, "height": height, "position": "Absolute"});
  Divtablefix!= null && divtablefix.offset (Divtablelayout.offset ());
  Divtablehead!= null && divtablehead.offset (Divtablelayout.offset ());
  Divtablecolumn!= null && divtablecolumn.offset (Divtablelayout.offset ());
Divtabledata.offset (Divtablelayout.offset ()); * * * Adjusts the width and height of the locked table, which calls the * * parameter definition * table in the Resize event-the table element to be locked or the table ID * Width-the scrolling area width of the table * HeigHT-table Scrolling Area Height */function adjusttablesize (table, width, height) {var tableId;
  if (typeof (table) = = ' String ') tableId = table;
  
  else TableId = table.attr (' id ');
  $ ("#" + tableId + "_tablelayout"). Width (width). height (height);
  $ ("#" + tableId + "_tablehead"). Width (WIDTH-17);
  $ ("#" + tableId + "_tablecolumn"). Height (HEIGHT-17);
$ ("#" + tableId + "_tabledata"). Width (width). height (height); function PageHeight () {if ($.browser.msie) {return Document.compatmode = = "Css1compat"? Document.documenteleme
  Nt.clientHeight:document.body.clientHeight;
  else {return self.innerheight;

}
}; Returns the current page width function pagewidth () {if ($.browser.msie) {return Document.compatmode = = "Css1compat"? Document.docume
  NtElement.clientWidth:document.body.clientWidth;
  else {return self.innerwidth;

}
};
  $ (document). Ready (function () {var table = $ ("table");
  var tableId = table.attr (' id ');
  var freezerownum = table.attr (' Freezerownum '); var fReezecolumnnum = table.attr (' Freezecolumnnum '); if (typeof (Freezerownum)!= ' undefined ' | | typeof (Freezecolumnnum)!= ' undefined ') {freezetable (table, Freezerownum | | 0, Freezecolumnnum | |
    
    0, PageWidth (), PageHeight ());
    var flag = false;
      
      $ (window). Resize (function () {if (flag) return; 
        settimeout (function () {adjusttablesize (tableId, PageWidth (), PageHeight ()); 
      Flag = false;
      
      }, 100);
    Flag = true;
  });
 }
});

When used, the freezing effect can be achieved by setting the Freezerownum and Freezecolumnnum property values on the table element

Copy Code code as follows:

<table id= "reporttable" width= "1900" freezerownum= "2" freezecolumnnum= "2" class= "" "align=" center ">
...
</table>

The above mentioned is the entire content of this article, I hope you can enjoy.