[转载]锁定表头和固定列(Fixed table head and columns)

[转载]锁定表头和固定列(Fixed table head and columns) – ☆磊☆ – 博客园.

前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery

因为方法很简单,就未封装成插件的形式,仅仅以代码方式发布。这里把自己做的方式写出来,以资纪念。

支持IE6+,FF3.6+,Opera9+,Chrome9+

一、实现方式

这里的准备使用4个table实现,具体如下图:

image

上图红色部分为要取出来的部分,蓝色部分为拼接后可以看到的部分。最终结果如下图

image

实现后效果:

姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623
姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623
姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623
姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623

二、整体的框架

1、最下面的是原始的Table。

2、用左边的table覆盖在上层,命名为tableColumn。

3、用上部的table覆盖在更上层,命名为tableHead。

4、在左上角覆盖固定不动的table,命名为tableFix。

自然在各自的外层都要用div框起来,以便后面的浮动和覆盖等等,所以结构的html如下:

<div id="MyTable_tableLayout">
	<div id="MyTable_tableFix">
		<table id="MyTable_tableFixClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableHead">
		<table id="MyTable_tableHeadClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableColumn">
		<table id="MyTable_tableColumnClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableData">
		<table id="MyTable" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
</div>

三、代码实现

整体框架结构出来后,下面要做的就是确定每个区域的高度,宽度,定位就算完成了。

首先确定下调用接口,调用时已经有table了,我们希望很简单的一行js即可高定,就用了一个方法实现。由于使用项目中table线宽全部都是1,所以未考虑其他线宽问题。

function FixTable(TableID, FixColumnNumber, width, height)

第一个参数:table的ID,第二个参数:要锁定的列数目,第三个参数:显示的宽度,第四个参数:显示的高度。

(一)首先创建上面所诉的框架出来:

			if ($("#" + TableID + "_tableLayout").length != 0) {
				$("#" + TableID + "_tableLayout").before($("#" + TableID));
				$("#" + TableID + "_tableLayout").empty();
			}
			else {
				$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
			}
 
			$('<div id="' + TableID + '_tableFix"></div>'
			+ '<div id="' + TableID + '_tableHead"></div>'
			+ '<div id="' + TableID + '_tableColumn"></div>'
			+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
 
 
			var oldtable = $("#" + TableID);
 
			var tableFixClone = oldtable.clone(true);
			tableFixClone.attr("id", TableID + "_tableFixClone");
			$("#" + TableID + "_tableFix").append(tableFixClone);
			var tableHeadClone = oldtable.clone(true);
			tableHeadClone.attr("id", TableID + "_tableHeadClone");
			$("#" + TableID + "_tableHead").append(tableHeadClone);
			var tableColumnClone = oldtable.clone(true);
			tableColumnClone.attr("id", TableID + "_tableColumnClone");
			$("#" + TableID + "_tableColumn").append(tableColumnClone);
			$("#" + TableID + "_tableData").append(oldtable);
 
			$("#" + TableID + "_tableLayout table").each(function () {
				$(this).css("margin", "0");
			});

(二)计算tableFix,tableHead的高度:

			var HeadHeight = $("#" + TableID + "_tableHead thead").height();
			HeadHeight += 2;
			$("#" + TableID + "_tableHead").css("height", HeadHeight);
			$("#" + TableID + "_tableFix").css("height", HeadHeight);

(三)计算tableFix,tableColumn的宽度:

			var ColumnsWidth = 0;
			var ColumnsNumber = 0;
			$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
				ColumnsWidth += $(this).outerWidth(true);
				ColumnsNumber++;
			});
			ColumnsWidth += 2;
			if ($.browser.msie) {
				switch ($.browser.version) {
					case "7.0":
						if (ColumnsNumber >= 3) ColumnsWidth--;
						break;
					case "8.0":
						if (ColumnsNumber >= 2) ColumnsWidth--;
						break;
				}
			}
			$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
			$("#" + TableID + "_tableFix").css("width", ColumnsWidth);

(四)为tableHead和tableColumn添加联动的滚动条事件:

			$("#" + TableID + "_tableData").scroll(function () {
				$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
				$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
			});

(五)为整体添加样式,定位:

			$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
			$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
			$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
			$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
 
			$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
			$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
			$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
			$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

(六)为较小的table修正样式:

			if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
				$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
				$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
			}
			if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
				$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
				$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableFix table").height() + 17);
			}

完整代码如下:

function FixTable(TableID, FixColumnNumber, width, height) {
	/// <summary>
	///     锁定表头和列
	///     <para> sorex.cnblogs.com </para>
	/// </summary>
	/// <param name="TableID" type="String">
	///     要锁定的Table的ID
	/// </param>
	/// <param name="FixColumnNumber" type="Number">
	///     要锁定列的个数
	/// </param>
	/// <param name="width" type="Number">
	///     显示的宽度
	/// </param>
	/// <param name="height" type="Number">
	///     显示的高度
	/// </param>
	if ($("#" + TableID + "_tableLayout").length != 0) {
		$("#" + TableID + "_tableLayout").before($("#" + TableID));
		$("#" + TableID + "_tableLayout").empty();
	}
	else {
		$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
	}

	$('<div id="' + TableID + '_tableFix"></div>'
	+ '<div id="' + TableID + '_tableHead"></div>'
	+ '<div id="' + TableID + '_tableColumn"></div>'
	+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");


	var oldtable = $("#" + TableID);

	var tableFixClone = oldtable.clone(true);
	tableFixClone.attr("id", TableID + "_tableFixClone");
	$("#" + TableID + "_tableFix").append(tableFixClone);
	var tableHeadClone = oldtable.clone(true);
	tableHeadClone.attr("id", TableID + "_tableHeadClone");
	$("#" + TableID + "_tableHead").append(tableHeadClone);
	var tableColumnClone = oldtable.clone(true);
	tableColumnClone.attr("id", TableID + "_tableColumnClone");
	$("#" + TableID + "_tableColumn").append(tableColumnClone);
	$("#" + TableID + "_tableData").append(oldtable);

	$("#" + TableID + "_tableLayout table").each(function () {
		$(this).css("margin", "0");
	});


	var HeadHeight = $("#" + TableID + "_tableHead thead").height();
	HeadHeight += 2;
	$("#" + TableID + "_tableHead").css("height", HeadHeight);
	$("#" + TableID + "_tableFix").css("height", HeadHeight);


	var ColumnsWidth = 0;
	var ColumnsNumber = 0;
	$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
		ColumnsWidth += $(this).outerWidth(true);
		ColumnsNumber++;
	});
	ColumnsWidth += 2;
	if ($.browser.msie) {
		switch ($.browser.version) {
			case "7.0":
				if (ColumnsNumber >= 3) ColumnsWidth--;
				break;
			case "8.0":
				if (ColumnsNumber >= 2) ColumnsWidth--;
				break;
		}
	}
	$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
	$("#" + TableID + "_tableFix").css("width", ColumnsWidth);


	$("#" + TableID + "_tableData").scroll(function () {
		$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
		$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
	});

	$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
	$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
	$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
	$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });

	$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

	if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
		$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
		$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
	}
	if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
		$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
		$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableFix table").height() + 17);
	}
}
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏