锁定表头和固定列(Fixed table head and columns)
生活随笔
收集整理的這篇文章主要介紹了
锁定表头和固定列(Fixed table head and columns)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前段時間需要這個功能，但是找了很多都不能完美的實現，不是只能鎖定表頭，就是瀏覽器兼容問題什么的，在此就自己做了一個鎖定表頭和列的js方法，依賴于JQuery。
因為方法很簡單，就未封裝成插件的形式，僅僅以代碼方式發布。這里把自己做的方式寫出來，以資紀念。
支持IE6+，FF3.6+，Opera9+，Chrome9+
一、實現方式
這里的準備使用4個table實現，具體如下圖：
上圖紅色部分為要取出來的部分，藍色部分為拼接后可以看到的部分。最終結果如下圖
實現后效果：
| 學生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()); });
（五）為較小的table修正樣式：
if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableHead table").width()) { $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableHead table").width()); $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableHead table").width() + 17); } if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); }
（六）為整體添加樣式，定位：
$("#" + 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());
完整代碼如下:
View Code?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 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" }); ?? ????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 + "_tableColumn table").height() + 17); ????} ?? ????$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); ????$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); ????$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); ????$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset()); } |
ps:之前的代碼有點bug，在高度不夠的時候定位會產生錯誤，在此修正了。
?
?
?
轉載于:https://www.cnblogs.com/lteal/archive/2012/12/03/2799574.html
總結
以上是生活随笔為你收集整理的锁定表头和固定列(Fixed table head and columns)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在win7环境下使用网络无线共享把电脑变
- 下一篇： 将Fri May 04 17:25:34