[ 登录注册 ]

HTML/CSS

锁定表头和固定列

2016/08/12 15:08 [db:作者] 返回上一页

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

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

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

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

image

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

image

实现后效果:

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

二、整体的框架
1、最下面的是原始的Table。

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

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

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

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

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

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

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

function FixTable(TableID, FixColumnNumber, width, height)

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

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

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

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

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

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

   var ColumnsWidth = 0;
   var ColumnsNumber = 0;
   $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
    ColumnsWidth += $(this).outerWidth(true);
    ColumnsNumber++;
   });
   ColumnsWidth += 2;
   if ($.browser.msie) {
    switch ($.browser.version) {
     case "7.0":
      if (ColumnsNumber >= 3) ColumnsWidth--;
      break;
     case "8.0":
      if (ColumnsNumber >= 2) ColumnsWidth--;
      break;
    }
   }
   $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
   $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
(四)为tableHead和tableColumn添加联动的滚动条事件:
   $("#" + TableID + "_tableData").scroll(function () {
    $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
    $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
   });
(五)为整体添加样式,定位:
   $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
   $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
   $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
   $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
 
   $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
   $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
   $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
   $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
(六)为较小的table修正样式:
   if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
    $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
    $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
   }
   if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
    $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
    $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableFix table").height() + 17);
   }

完整代码如下:

 

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html_css/2016/0812/368034.html
评论
发表评论