本文給大家分享的是前些日子做的項目中的一個客戶的特殊要求，很少遇到，查詢了好久的度娘，才算找到解決方案，這里分享給大家，有需要的小伙伴可以參考下。

 

客戶要求實現對表格數據的頭幾行或者頭幾列進行凍結，即滾動時保持這幾行/列不動，通過網上查找代碼，參考已有的代碼的思路，實現了可以任意對行、列進行凍結。

實現原理：

創建多個div，div之間通過css實現層疊，每個div放置當前表格的克隆。例如：需要行凍結時，創建存放凍結行表格的div，通過設置z-index屬性和position屬性，讓凍結行表格在數據表格的上層。同理，需要列凍結時，創建存放凍結列表格的div，并放置在數據表格的上層。如果需要行列都凍結時，則除了創建凍結行、凍結列表格的div，還需要創建左上角的固定行列表格的div，并放置在所有div的最上層。 
處理表格的滾動事件，在表格橫向或者縱向滾動時，同時讓相應的凍結行和凍結列也同步滾動。 
處理html的resize事件，同步修改表格的滾動區域寬度和高度

代碼如下:
 

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.   if (typeof(freezeRowNum) == 'string') 
13.     freezeRowNum = parseInt(freezeRowNum) 
14.      
15.   if (typeof(freezeColumnNum) == 'string') 
16.     freezeColumnNum = parseInt(freezeColumnNum) 
17.  
18.   var tableId; 
19.   if (typeof(table) == 'string') { 
20.     tableId = table; 
21.     table = $('#' + tableId); 
22.   } else 
23.     tableId = table.attr('id'); 
24.      
25.   var divTableLayout = $("#" + tableId + "_tableLayout"); 
26.    
27.   if (divTableLayout.length != 0) { 
28.     divTableLayout.before(table); 
29.     divTableLayout.empty(); 
30.   } else { 
31.     table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); 
32.      
33.     divTableLayout = $("#" + tableId + "_tableLayout"); 
34.   } 
35.    
36.   var html = ''; 
37.   if (freezeRowNum > 0 && freezeColumnNum > 0) 
38.     html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>'; 
39.      
40.   if (freezeRowNum > 0) 
41.     html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>'; 
42.      
43.   if (freezeColumnNum > 0) 
44.     html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>'; 
45.      
46.   html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>'; 
47.    
48.    
49.   $(html).appendTo("#" + tableId + "_tableLayout"); 
50.    
51.   var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null; 
52.   var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null; 
53.   var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null; 
54.   var divTableData = $("#" + tableId + "_tableData"); 
55.    
56.   divTableData.append(table); 
57.    
58.   if (divTableFix != null) { 
59.     var tableFixClone = table.clone(true); 
60.     tableFixClone.attr("id", tableId + "_tableFixClone"); 
61.     divTableFix.append(tableFixClone); 
62.   } 
63.    
64.   if (divTableHead != null) { 
65.     var tableHeadClone = table.clone(true); 
66.     tableHeadClone.attr("id", tableId + "_tableHeadClone"); 
67.     divTableHead.append(tableHeadClone); 
68.   } 
69.    
70.   if (divTableColumn != null) { 
71.     var tableColumnClone = table.clone(true); 
72.     tableColumnClone.attr("id", tableId + "_tableColumnClone"); 
73.     divTableColumn.append(tableColumnClone); 
74.   } 
75.    
76.   $("#" + tableId + "_tableLayout table").css("margin", "0"); 
77.    
78.   if (freezeRowNum > 0) { 
79.     var HeadHeight = 0; 
80.     var ignoreRowNum = 0; 
81.     $("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () { 
82.       if (ignoreRowNum > 0) 
83.         ignoreRowNum--; 
84.       else { 
85.         var td = $(this).find('td:first, th:first'); 
86.         HeadHeight += td.outerHeight(true); 
87.          
88.         ignoreRowNum = td.attr('rowSpan'); 
89.         if (typeof(ignoreRowNum) == 'undefined') 
90.           ignoreRowNum = 0; 
91.         else 
92.           ignoreRowNum = parseInt(ignoreRowNum) - 1; 
93.       } 
94.     }); 
95.     HeadHeight += 2; 
96.      
97.     divTableHead.css("height", HeadHeight); 
98.     divTableFix != null && divTableFix.css("height", HeadHeight); 
99.   } 
100.    
101.   if (freezeColumnNum > 0) { 
102.     var ColumnsWidth = 0; 
103.     var ColumnsNumber = 0; 
104.     $("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () { 
105.       if (ColumnsNumber >= freezeColumnNum) 
106.         return; 
107.          
108.       ColumnsWidth += $(this).outerWidth(true); 
109.        
110.       ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1; 
111.     }); 
112.     ColumnsWidth += 2; 
113.  
114.     divTableColumn.css("width", ColumnsWidth); 
115.     divTableFix != null && divTableFix.css("width", ColumnsWidth); 
116.   } 
117.    
118.   divTableData.scroll(function () { 
119.     divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft()); 
120.      
121.     divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop()); 
122.   }); 
123.    
124.   divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" }); 
125.   divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" }); 
126.   divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" }); 
127.   divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" }); 
128.    
129.   divTableFix != null && divTableFix.offset(divTableLayout.offset()); 
130.   divTableHead != null && divTableHead.offset(divTableLayout.offset()); 
131.   divTableColumn != null && divTableColumn.offset(divTableLayout.offset()); 
132.   divTableData.offset(divTableLayout.offset()); 
133. } 
134.  
135. /* 
136.  * 調整鎖定表的寬度和高度，這個函數在resize事件中調用 
137.  *  
138.  * 參數定義 
139.  *   table - 要鎖定的表格元素或者表格ID 
140.  *   width - 表格的滾動區域寬度 
141.  *   height - 表格的滾動區域高度 
142.  */ 
143. function adjustTableSize(table, width, height) { 
144.   var tableId; 
145.   if (typeof(table) == 'string') 
146.     tableId = table; 
147.   else 
148.     tableId = table.attr('id'); 
149.    
150.   $("#" + tableId + "_tableLayout").width(width).height(height); 
151.   $("#" + tableId + "_tableHead").width(width - 17); 
152.   $("#" + tableId + "_tableColumn").height(height - 17); 
153.   $("#" + tableId + "_tableData").width(width).height(height); 
154. } 
155.  
156. function pageHeight() { 
157.   if ($.browser.msie) { 
158.     return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; 
159.   } else { 
160.     return self.innerHeight; 
161.   } 
162. }; 
163.  
164. //返回當前頁面寬度 
165. function pageWidth() { 
166.   if ($.browser.msie) { 
167.     return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth; 
168.   } else { 
169.     return self.innerWidth; 
170.   } 
171. }; 
172.  
173. $(document).ready(function() { 
174.   var table = $("table"); 
175.   var tableId = table.attr('id'); 
176.   var freezeRowNum = table.attr('freezeRowNum'); 
177.   var freezeColumnNum = table.attr('freezeColumnNum'); 
178.    
179.   if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') { 
180.     freezeTable(table, freezeRowNum || 0, freezeColumnNum || 0, pageWidth(), pageHeight()); 
181.      
182.     var flag = false; 
183.     $(window).resize(function() { 
184.       if (flag)  
185.         return ; 
186.        
187.       setTimeout(function() {  
188.         adjustTableSize(tableId, pageWidth(), pageHeight());  
189.         flag = false;  
190.       }, 100); 
191.        
192.       flag = true; 
193.     }); 
194.   } 
195. });