zoukankan      html  css  js  c++  java
  • JaveScript-解决表格使用滚动条时冻结表头栏问题

    解决方法:

     //设置表格表头里的th==表格内容里的td
            function ThEqualTd(thId, tdId) {
                var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数
                var tdW = "";//清空tdW的宽度
                for (i = 0; i < tdNum; i++) {
                    tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度,定义其等于tdW
                    document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW
                }
            }

    这里就本人的leonaScroll-1.3.js滚动条插件遇到的上述问题做详细说明

    根据滚动条,我们做好布局,如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title></title>
     6     <meta charset="utf-8" />
     7     <script src="jquery-1.10.2.js"></script>
     8     <script src="leonaScroll-min-1.3.js"></script>
     9 </head>
    10 <body>
    11     <style>
    12         .table{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px;   }
    13         .table table{ line-height:25px;border:1px solid #000000;  }
    14         .table table td,.table table th{height:25px; text-align:center;  }
    15     </style>
    16     <div class="table">
    17         <table>
    18             <tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr>
    19             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    20             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    21             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    22             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    23             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    24             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    25             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    26             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    27             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    28             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    29             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    30             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    31             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    32             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    33             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    34             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    35             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    36             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    37             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    38             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    39             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    40             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    41             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    42             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    43             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    44             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    45             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    46             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    47             <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    48         </table>
    49     </div>
    50     <script>
    51         $(".table").LeonaScroll();
    52     </script>
    53 </body>
    54 </html>

    问题:上述代码可以实现表格内容超出.table界定的400px时就,出现滚动条,并可以滚动显示内容,但是却出现一个问题,那就是我们的表头也会随内容一起向上滚动,以至于用户在查看地下内容时无法直观的看见我们的表头,而使表格做不到一目了然。针对这个问题,我做了以下处理:

    1、首先将HTML的布局做调整,将表头和内容分别写在不同的table里,如下:

     1  <style>
     2         .all{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px; }
     3          table td,.table table th{height:25px; text-align:center;  }
     4         .tableTh{width:100%; height:25px; }
     5         .tableTd{width:100%; height:375px;}
     6         .tableTd table{ line-height:25px;border:1px solid #000000;  }
     7        
     8     </style>
     9 
    10     <div class="all"><!--整体全部(表头+外框)-->
    11 
    12         <table class="tableTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr></table><!--表头-->
    13 
    14         <div class="tableTd"><!--外框(内容+滚动条)-->
    15             <table><!--内容-->
    16                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    17                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    18                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    19                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    20                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    21                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    22                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    23                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    24                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    25                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    26                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    27                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    28                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    29                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    30                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    31                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    32                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    33                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    34                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    35                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    36                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    37                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    38                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    39                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    40                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    41                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    42                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    43                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    44                 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    45             </table>
    46         </div>
    47     </div>
    48     <script>
    49         $(".tableTd").LeonaScroll();
    50     </script>

    2、这样,由于表头与内容分隔,且表头不在滚动文本内容区域内,再滚动时,就会发现表头会一直冻结在表格内容之上。但是正因为分隔到不同的table中,又出现了一个问题,表格的th与td宽度不等。

    这里如果你的td是设定死的宽度,那就很好办了,th宽度=td宽度就好了。然后很多时候我们使用表格,他的td是随内容长度大小去自适应变更的,所以这个时候我们就需要下面这段js,使他们实时相等了。

    在这里我讲这段封成了一个方法,以便其调用:

     1 <script>
     2         $(".tableTd").LeonaScroll();//滚动条调用
     3 
     4         ThEqualTd("tabTh", "tabTd");//调用th=td
     5 
     6         //设置表格表头里的th==表格内容里的td
     7         function ThEqualTd(thId, tdId) {
     8             var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数
     9             var tdW = "";//清空tdW的宽度
    10             for (i = 0; i < tdNum; i++) {
    11                 tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度,定义其等于tdW
    12                 document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW
    13             }
    14         }
    15     </script>

    3、恩,差不多可以看到效果了,但是,还差最后一步,也是细节,不可忽视哟!那就是我们还应该在考虑到滚动条占的位置,也就是我们的th表头里是没有滚动条的,然而,为了让表格的表头和内容更加协调。我们应该再加一个空的th,给其设置宽度等于滚动条所占的宽度,如下:

    <table class="tableTh" id="tabTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th width="14"></th></tr></table><!--表头-->4、

    ok,这下就大功告成了。

    作者:leona

    原文链接:http://www.cnblogs.com/leona-d/p/5950280.html 

    版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
  • 相关阅读:
    代码重构~方法归子
    代码重构~代码注释
    VS2010安装帮助文档
    imagecreate()与imagecreatetruecolor()区别
    php cookie 和session详解
    horner's rule霍纳法则及综合除法
    php单引号和双引号的区别与用法
    php通过session判断用户是否登录
    php 产生验证码
    基于递归的整数幂的计算
  • 原文地址:https://www.cnblogs.com/leona-d/p/6125569.html
Copyright © 2011-2022 走看看