js实现html table 行,列锁定的案例
js实现html table 表头，指定列锁定
1、实现效果如下：
2、实现代码（代码可以直接运行）：
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>
