鎖定表頭和固定列(Fixed table head and columns)

原創 java学习开发者 2020-02-22 12:59

前段時間需要這個功能，但是找了很多都不能完美的實現，不是隻能鎖定表頭，就是瀏覽器兼容問題什麼的，在此就自己做了一個鎖定表頭和列的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()); });

（五）爲較小的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());

完整代碼如下:

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());

轉自:http://www.cnblogs.com/sorex/archive/2011/06

資源:http://download.csdn.net/detail/yjxfox/4816777

java學習開發者
發佈了12 篇原創文章 · 獲贊 18 · 訪問量 46萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章