实现原理：
创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建存放冻结列表格的div，并放置在数据表格的上层。如果需要行列都冻结时，则除了创建冻结行、冻结列表格的div，还需要创建左上角的固定行列表格的div，并放置在所有div的最上层。
处理表格的滚动事件，在表格横向或者纵向滚动时，同时让相应的冻结行和冻结列也同步滚动。
说明：
首先在最外层创建一个最大的Layer的DIV用来承载以下的DIV：
冻结行列的插件设置，如果单纯冻结某行或者某列，那么总共需要创建两个DIV便可以实现；如果行列同时冻结，则需要创建四个DIV实现。
例如，此处需要行列同时冻结，则生成的页面代码如下结构：
使用操作：
1》》》先定义冻结行列的JS代码
freezeTable.js
1 /* 2 * 锁定表头和列 3 * 4 * 参数定义 5 * table - 要锁定的表格元素或者表格ID 6 * freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0 7 * freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0 8 * width - 表格的滚动区域宽度 9 * height - 表格的滚动区域高度 10 */ 11 function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) { 12 13 //获取冻结行数或者列数 14 if (typeof(freezeRowNum) == 'string') 15 freezeRowNum = parseInt(freezeRowNum) 16 17 if (typeof(freezeColumnNum) == 'string') 18 freezeColumnNum = parseInt(freezeColumnNum) 19 //获取table 20 var tableId; 21 if (typeof(table) == 'string') { 22 tableId = table; 23 table = $('#' + tableId); 24 } else 25 tableId = table.attr('id'); 26 27 /** 28 * 生成最外层的DIV用来承载内部的四个DIV 29 */ 30 var divTableLayout = $("#" + tableId + "_tableLayout"); 31 32 if (divTableLayout.length != 0) { 33 divTableLayout.before(table); 34 divTableLayout.empty(); 35 } else { 36 table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); 37 38 divTableLayout = $("#" + tableId + "_tableLayout"); 39 } 40 41 /** 42 * 根据需要页面table定义的属性 需要冻结的行或者列 ，对应的拼接字符串用于生成不同的DIV 【如果行列同时冻结：生成总共四个DIV】【单独冻结行或列，仅需要生成两个DIV】 43 * 这个四个DIV都是包括数据在内，完全克隆了原本的table， 44 */ 45 var html = ''; 46 if (freezeRowNum > 0 && freezeColumnNum > 0) 47 html += '<div >; 48 49 if (freezeRowNum > 0) 50 html += '<div >; 51 52 if (freezeColumnNum > 0) 53 html += '<div >; 54 55 html += '<div >; 56 57 //将div追加到页面 58 $(html).appendTo("#" + tableId + "_tableLayout"); 59 60 var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null; 61 var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null; 62 var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null; 63 var divTableData = $("#" + tableId + "_tableData"); //位于最底层的【数据DIV】【第一个DIV，也就是原本的那个真身】 64 65 divTableData.append(table); 66 //行列同时冻结生成的【行列DIV】【第二个DIV】，一般位于左上角重叠部分 67 if (divTableFix != null) { 68 var tableFixClone = table.clone(true); //克隆1 69 tableFixClone.attr("id", tableId + "_tableFixClone"); 70 divTableFix.append(tableFixClone); 71 } 72 //行冻结生成的【冻结行DIV】【第三个DIV】 73 if (divTableHead != null) { 74 var tableHeadClone = table.clone(true);//克隆2 75 tableHeadClone.attr("id", tableId + "_tableHeadClone"); 76 divTableHead.append(tableHeadClone); 77 } 78 //列冻结生成的【冻结列DIV】【第四个DIV】 79 if (divTableColumn != null) { 80 var tableColumnClone = table.clone(true);//克隆3 81 tableColumnClone.attr("id", tableId + "_tableColumnClone"); 82 divTableColumn.append(tableColumnClone); 83 } 84 85 $("#" + tableId + "_tableLayout table").css("margin", "0"); 86 87 /** 88 * 根据冻结行数，设置行冻结的div的高度【如果行列同时冻结，则行列div也设置对应高度】 89 */ 90 if (freezeRowNum > 0) { 91 var HeadHeight = 0; 92 var ignoreRowNum = 0; 93 $("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () { 94 if (ignoreRowNum > 0) 95 ignoreRowNum--; 96 else { 97 var td = $(this).find('td:first, th:first'); 98 HeadHeight += td.outerHeight(true); 99 100 ignoreRowNum = td.attr('rowSpan'); 101 if (typeof(ignoreRowNum) == 'undefined') 102 ignoreRowNum = 0; 103 else 104 ignoreRowNum = parseInt(ignoreRowNum) - 1; 105 } 106 }); 107 HeadHeight += 2; 108 109 divTableHead.css("height", HeadHeight); 110 divTableFix != null && divTableFix.css("height", HeadHeight); 111 } 112 113 /** 114 * 根据冻结列数，对冻结列DIV设置宽度【如果行列同时冻结，则行列div也设置对应宽度】 115 */ 116 if (freezeColumnNum > 0) { 117 var ColumnsWidth = 0; 118 var ColumnsNumber = 0; 119 $("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () { 120 if (ColumnsNumber >= freezeColumnNum) 121 return; 122 123 ColumnsWidth += $(this).outerWidth(true); 124 125 ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1; 126 }); 127 ColumnsWidth += 2; 128 129 divTableColumn.css("width", ColumnsWidth); 130 divTableFix != null && divTableFix.css("width", ColumnsWidth); 131 } 132 133 //滚动 134 divTableData.scroll(function () { 135 divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft()); 136 137 divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop()); 138 }); 139 140 divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" }); 141 divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" }); 142 divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" }); 143 divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" }); 144 145 divTableFix != null && divTableFix.offset(divTableLayout.offset()); 146 divTableHead != null && divTableHead.offset(divTableLayout.offset()); 147 divTableColumn != null && divTableColumn.offset(divTableLayout.offset()); 148 divTableData.offset(divTableLayout.offset()); 149 } 150 151 /* 152 * 调整锁定表的宽度和高度，这个函数在resize事件中调用 153 * 154 * 参数定义 155 * table - 要锁定的表格元素或者表格ID 156 * width - 表格的滚动区域宽度 157 * height - 表格的滚动区域高度 158 */ 159 function adjustTableSize(table, width, height) { 160 var tableId; 161 if (typeof(table) == 'string') 162 tableId = table; 163 else 164 tableId = table.attr('id'); 165 166 $("#" + tableId + "_tableLayout").width(width).height(height); 167 $("#" + tableId + "_tableHead").width(width - 17); 168 $("#" + tableId + "_tableColumn").height(height - 17); 169 $("#" + tableId + "_tableData").width(width).height(height); 170 } 171 172 //返回页面的高度 173 function pageHeight() { 174 if ( /msie/.test(navigator.userAgent.toLowerCase())) { 175 return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; 176 } else { 177 return self.innerHeight; 178 } 179 }; 180 181 //返回当前页面宽度 182 function pageWidth() { 183 if ( /msie/.test(navigator.userAgent.toLowerCase())) { 184 return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth; 185 } else { 186 return self.innerWidth; 187 } 188 };