`
m635674608
  • 浏览: 5029000 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

锁定表头和固定列(Fixed table head and columns)

    博客分类：
  • java
 
阅读更多

前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的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());
}

ps:之前的代码有点bug，在高度不够的时候定位会产生错误，在此修正了。

 

转载http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html

分享到：
| FTP错误列表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 锁定表头和固定列(Fixed table head and columns)

    前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码...

    Bootstrap Table Fixed Columns 固定列

    "Fixed Columns"功能是Bootstrap Table的一个扩展，它允许用户在表格中固定左侧或右侧的列，即使在滚动时，这些列也会始终保持可见，提高了数据浏览的便利性。这对于那些需要大量数据展示并且需要快速访问特定列信息...

    bootstrap-table-fixed-columns.zip

    `bootstrap-table-fixed-columns` 插件的工作原理是通过 JavaScript 和 CSS 实现表格的固定列效果。它会将表格的表头和内容部分分离，并在需要时添加额外的样式和布局，确保表头在滚动时始终保持可见。在实际应用中...

    bootstrap-table-fixed-columns冻结列，并完善排序、列宽和合并行

    "bootstrap-table-fixed-columns" 是这个库的一个扩展插件，旨在提供固定列的功能，使得在宽屏或窄屏设备上查看表格时，重要的列始终保持可见，增强用户体验。 在原版的 `bootstrap-table-fixed-columns` 插件中，...

    asp.net html+table固定表头和左侧列.rar

    在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...

    bootstrap-table-fixed-columns(css,js)

    这个项目的扩展`bootstrap-table-fixed-columns`专注于解决在大表格中固定首列或首行的问题，使得在滚动时这些重要列始终保持可见，提高用户在浏览长表格时的可读性和交互性。在网页设计中，尤其是在数据密集型应用...

    bootstrap-table-fixed-columns.js

    "bootstrap-table-fixed-columns.js" 是这个库的一个扩展插件，专门用于处理表格中的固定列问题。在网页设计中，固定列是一个常见的需求，尤其是在数据量大且列宽固定的表格中，固定列可以确保用户在滚动查看数据时...

    bootstrap-table实现表头固定以及列固定的方法示例

    这样即使用户滚动页面查看表格内容时，固定的表头或列依然可见，方便用户快速识别数据所在的列和行。 首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery...

    HTML页面table表格固定行和列

    这个例子中，我们使用了CSS Grid将表格分为两部分，左侧固定列和右侧可滚动列。`position: sticky`属性使表头在滚动时保持在视口顶部，`left: 0`确保它固定在左侧。 对于更复杂的情况，例如，当表格有交错的表头...

    bootstrap-table-fixed-columns

    通过以上介绍，我们可以看到 "bootstrap-table-fixed-columns" 插件为 Bootstrap Table 增添了强大的固定列功能，使得在处理大数据量表格时能提供更好的用户界面和交互体验。开发者可以根据项目需求灵活运用，提升...

    fixed-columns

    7. **单元格交互**：当列被固定后，需要处理单元格的点击、排序和其他交互行为，确保这些功能在固定列和非固定列之间能够一致地工作。 通过以上技术，fixed-columns可以帮助我们创建出更高效、用户友好的数据展示...

    bootstrap-table-fixed-columns-master.zip

    通过以上知识点的学习和实践，开发者可以充分利用bootstrap-table-fixed-columns插件，创建出既美观又实用的固定列表格，提高网页数据展示的易用性和可读性。在实际开发中，应结合项目需求，灵活运用这些技术，以...

    bootstrap-table-fixed-columns-v1.0.2.zip

    最近需要对表头进行冻结，找到了bootstrap-table-fixed-columns组件（也是bootstrap-table作者写的）能实现冻结效果，但带来了其他问题，包括：排序失效、列宽错位、合并行无效等，于是引入该组件的同时，顺便解决了...

    基于bootstrap-table 实现 右侧列固定

    基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...

    jQuery插件冻结行列、固定列固定行，html、table实现

    这个插件通过监听表格容器的滚动事件，动态调整表头和固定列的位置，使其相对于可视区域保持不变。它利用了CSS定位（position）属性，如`position: absolute`或`position: fixed`来实现元素的固定。对于复合表头，...

    ext 多表头和锁定列结合的示例

    EXT JS允许开发者构建高度自定义的用户界面，尤其是在处理大量数据时，锁定列和多表头功能能显著提高数据可读性和操作性。 **多表头（复合表头）**在EXT JS中的实现，是指在一个表格中可以有多个水平或垂直的表头，...

Magicbox
Global site tag (gtag.js) - Google Analytics