js实现html table 表头，指定列锁定
实现效果如下：
感兴趣的朋友可以直接复制出来运行看效果。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>new document</title>
5 <script type="text/javascript"
6 src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
7
8 <script type="text/javascript">
9 function FixTable(TableID, FixColumnNumber, width, height) {
10 /// <summary>
11 /// 锁定表头和列
12 /// <para> sorex.cnblogs.com </para>
13 /// </summary>
14 /// <param name="TableID" type="String">
15 /// 要锁定的Table的ID
16 /// </param>
17 /// <param name="FixColumnNumber" type="Number">
18 /// 要锁定列的个数
19 /// </param>
20 /// <param name="width" type="Number">
21 /// 显示的宽度
22 /// </param>
23 /// <param name="height" type="Number">
24 /// 显示的高度
25 /// </param>
26 if ($("#" + TableID + "_tableLayout").length != 0) {
27 $("#" + TableID + "_tableLayout").before($("#" + TableID));
28 $("#" + TableID + "_tableLayout").empty();
29 }
30 else {
31 $("#" + TableID).after("<div id=‘" + TableID + "_tableLayout‘ style=‘overflow:hidden;height:" + height + "px; width:" + width + "px;‘></div>");
32 }
33 $(‘<div id="‘ + TableID + ‘_tableFix"></div>‘
34 + ‘<div id="‘ + TableID + ‘_tableHead"></div>‘
35 + ‘<div id="‘ + TableID + ‘_tableColumn"></div>‘
36 + ‘<div id="‘ + TableID + ‘_tableData"></div>‘).appendTo("#" + TableID + "_tableLayout");
37 var oldtable = $("#" + TableID);
38 var tableFixClone = oldtable.clone(true);
39 tableFixClone.attr("id", TableID + "_tableFixClone");
40 $("#" + TableID + "_tableFix").append(tableFixClone);
41 var tableHeadClone = oldtable.clone(true);
42 tableHeadClone.attr("id", TableID + "_tableHeadClone");
43 $("#" + TableID + "_tableHead").append(tableHeadClone);
44 var tableColumnClone = oldtable.clone(true);
45 tableColumnClone.attr("id", TableID + "_tableColumnClone");
46 $("#" + TableID + "_tableColumn").append(tableColumnClone);
47 $("#" + TableID + "_tableData").append(oldtable);
48 $("#" + TableID + "_tableLayout table").each(function () {
49 $(this).css("margin", "0");
50 });
51 var HeadHeight = $("#" + TableID + "_tableHead thead").height();
52 HeadHeight += 2;
53 $("#" + TableID + "_tableHead").css("height", HeadHeight);
54 $("#" + TableID + "_tableFix").css("height", HeadHeight);
55 var ColumnsWidth = 0;
56 var ColumnsNumber = 0;
57 $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
58 ColumnsWidth += $(this).outerWidth(true);
59 ColumnsNumber++;
60 });
61 ColumnsWidth += 2;
62 if ($.browser.msie) {
63 switch ($.browser.version) {
64 case "7.0":
65 if (ColumnsNumber >= 3) ColumnsWidth--;
66 break;
67 case "8.0":
68 if (ColumnsNumber >= 2) ColumnsWidth--;
69 break;
70 }
71 }
72 $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
73 $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
74 $("#" + TableID + "_tableData").scroll(function () {
75 $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
76 $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
77 });
78 $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
79 $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
80 $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
81 $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
82 if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
83 $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
84 $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
85 }
86 if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
87 $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
88 $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
89 }
90 $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
91 $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
92 $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
93 $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
94 }
95 $(document).ready(function () {
96 FixTable("MyTable", 1, 600, 400);
97 });
98 </script>
99 </head>
100 <body>
101 <table style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
102 id="MyTable" border="1" cellspacing="0" cellpadding="0">
103 <thead>
104 <tr>
105 <th style="text-align: center; width: 80px" rowspan="3">姓名</th>
106 <th style="text-align: center; width: 80px" rowspan="3">班级</th>
107 <th style="text-align: center" colspan="10">成绩</th>
108 </tr>
109 <tr>
110 <th style="text-align: center" colspan="3">主科</th>
111 <th style="text-align: center" colspan="3">文科</th>
112 <th style="text-align: center" colspan="3">理科</th>
113 <th style="text-align: center; width: 80px" rowspan="2">总分</th>
114 </tr>
115 <tr>
116 <th style="text-align: center; width: 80px">语文</th>
117 <th style="text-align: center; width: 80px">数学</th>
118 <th style="text-align: center; width: 80px">英语</th>
119 <th style="text-align: center; width: 80px">政治</th>
120 <th style="text-align: center; width: 80px">历史</th>
121 <th style="text-align: center; width: 80px">地理</th>
122 <th style="text-align: center; width: 80px">物理</th>
123 <th style="text-align: center; width: 80px">化学</th>
124 <th style="text-align: center; width: 80px">生物</th>
125 </tr>
126 <!--
127 <tr>
128 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
129 姓名
130 </th>
131 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
132 班级
133 </th>
134 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
135 语文
136 </th>
137 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
138 数学
139 </th>
140 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
141 英语
142 </th>
143 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
144 政治
145 </th>
146 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
147 历史
148 </th>
149 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
150 地理
151 </th>
152 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
153 物理
154 </th>
155 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
156 化学
157 </th>
158 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
159 生物
160 </th>
161 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
162 总分
163 </th>
164
165 </tr>
166 -->
167 </thead>
168 <tbody>
169 <!-- 数据行 -->
170 <tr>
171 <td>学生32</td>
172 <td>班级1</td>
173 <td>29</td>
174 <td>25</td>
175 <td>146</td>
176 <td>28</td>
177 <td>79</td>
178 <td>73</td>
179 <td>47</td>
180 <td>8</td>
181 <td>91</td>
182 <td>526</td>
183 </tr>
184 <tr>
185 <td>学生32</td>
186 <td>班级1</td>
187 <td>29</td>
188 <td>25</td>
189 <td>146</td>
190 <td>28</td>
191 <td>79</td>
192 <td>73</td>
193 <td>47</td>
194 <td>8</td>
195 <td>91</td>
196 <td>526</td>
197 </tr>
198 <tr>
199 <td>学生32</td>
200 <td>班级1</td>
201 <td>29</td>
202 <td>25</td>
203 <td>146</td>
204 <td>28</td>
205 <td>79</td>
206 <td>73</td>
207 <td>47</td>
208 <td>8</td>
209 <td>91</td>
210 <td>526</td>
211 </tr>
212 <tr>
213 <td>学生32</td>
214 <td>班级1</td>
215 <td>29</td>
216 <td>25</td>
217 <td>146</td>
218 <td>28</td>
219 <td>79</td>
220 <td>73</td>
221 <td>47</td>
222 <td>8</td>
223 <td>91</td>
224 <td>526</td>
225 </tr>
226 <tr>
227 <td>学生32</td>
228 <td>班级1</td>
229 <td>29</td>
230 <td>25</td>
231 <td>146</td>
232 <td>28</td>
233 <td>79</td>
234 <td>73</td>
235 <td>47</td>
236 <td>8</td>
237 <td>91</td>
238 <td>526</td>
239 </tr>
240 <tr>
241 <td>学生32</td>
242 <td>班级1</td>
243 <td>29</td>
244 <td>25</td>
245 <td>146</td>
246 <td>28</td>
247 <td>79</td>
248 <td>73</td>
249 <td>47</td>
250 <td>8</td>
251 <td>91</td>
252 <td>526</td>
253 </tr>
254 <tr>
255 <td>学生32</td>
256 <td>班级1</td>
257 <td>29</td>
258 <td>25</td>
259 <td>146</td>
260 <td>28</td>
261 <td>79</td>
262 <td>73</td>
263 <td>47</td>
264 <td>8</td>
265 <td>91</td>
266 <td>526</td>
267 </tr>
268 <tr>
269 <td>学生32</td>
270 <td>班级1</td>
271 <td>29</td>
272 <td>25</td>
273 <td>146</td>
274 <td>28</td>
275 <td>79</td>
276 <td>73</td>
277 <td>47</td>
278 <td>8</td>
279 <td>91</td>
280 <td>526</td>
281 </tr>
282 <tr>
283 <td>学生32</td>
284 <td>班级1</td>
285 <td>29</td>
286 <td>25</td>
287 <td>146</td>
288 <td>28</td>
289 <td>79</td>
290 <td>73</td>
291 <td>47</td>
292 <td>8</td>
293 <td>91</td>
294 <td>526</td>
295 </tr>
296 <tr>
297 <td>学生32</td>
298 <td>班级1</td>
299 <td>29</td>
300 <td>25</td>
301 <td>146</td>
302 <td>28</td>
303 <td>79</td>
304 <td>73</td>
305 <td>47</td>
306 <td>8</td>
307 <td>91</td>
308 <td>526</td>
309 </tr>
310 <tr>
311 <td>学生32</td>
312 <td>班级1</td>
313 <td>29</td>
314 <td>25</td>
315 <td>146</td>
316 <td>28</td>
317 <td>79</td>
318 <td>73</td>
319 <td>47</td>
320 <td>8</td>
321 <td>91</td>
322 <td>526</td>
323 </tr>
324 <tr>
325 <td>学生32</td>
326 <td>班级1</td>
327 <td>29</td>
328 <td>25</td>
329 <td>146</td>
330 <td>28</td>
331 <td>79</td>
332 <td>73</td>
333 <td>47</td>
334 <td>8</td>
335 <td>91</td>
336 <td>526</td>
337 </tr>
338 <tr>
339 <td>学生32</td>
340 <td>班级1</td>
341 <td>29</td>
342 <td>25</td>
343 <td>146</td>
344 <td>28</td>
345 <td>79</td>
346 <td>73</td>
347 <td>47</td>
348 <td>8</td>
349 <td>91</td>
350 <td>526</td>
351 </tr>
352 <tr>
353 <td>学生32</td>
354 <td>班级1</td>
355 <td>29</td>
356 <td>25</td>
357 <td>146</td>
358 <td>28</td>
359 <td>79</td>
360 <td>73</td>
361 <td>47</td>
362 <td>8</td>
363 <td>91</td>
364 <td>526</td>
365 </tr>
366 <tr>
367 <td>学生32</td>
368 <td>班级1</td>
369 <td>29</td>
370 <td>25</td>
371 <td>146</td>
372 <td>28</td>
373 <td>79</td>
374 <td>73</td>
375 <td>47</td>
376 <td>8</td>
377 <td>91</td>
378 <td>526</td>
379 </tr>
380 <tr>
381 <td>学生32</td>
382 <td>班级1</td>
383 <td>29</td>
384 <td>25</td>
385 <td>146</td>
386 <td>28</td>
387 <td>79</td>
388 <td>73</td>
389 <td>47</td>
390 <td>8</td>
391 <td>91</td>
392 <td>526</td>
393 </tr>
394 </tbody>
395 </table>
396 </body>
397 </html>
时间： 2024-08-07 00:13:41