当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>纯JS固定表头与左边右边列源码

纯JS固定表头与左边右边列源码

时间:2020/3/1 10:51:00 【admin】

这里的示例演示了一个table页面,并固定表头或者列头,以达到excel冻结列的效果,主要使用的js的scrollTop,scrollLeft.…

这里的示例演示了一个table页面,并固定表头或者列头,以达到excel冻结列的效果,主要使用的js的scrollTop,scrollLeft.

一.js中scrollTop及scrollLeft的使用说明

scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。例如:外层元素的高度值是200px,内层元素的高度值是300px。很明显,“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop就等于这部分“不可见的内容”的高度。

scrollLeft同上.

二.页面示例

页面示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>表头列头固定 -- Sara</title>

  <style>

    body{font-size:12px;}

.hdhall{float:left;width:100%;height:auto;}

    .hdhcmstl{width:164px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}

    .hdhcmstl span.xm{display:block;float:left; text-align:center; line-height:20px; border:1px solid #000; width:60px; height:20px}

    .hdhcmstl span.sj{display:block;float:left; text-align:center; line-height:20px; border:1px solid #000; width:100px; height:20px;border-left:0px;}

    .hdhfixedcontent{border-right:1px solid #000; width:100%; margin-bottom:5px}

    .hdhfixedcontent td{border-bottom:1px solid #000;border-left:1px solid #000; width:auto; height:25px; text-align:center}

    .hdhfixedleft{float: left;height:200px!important;width:164px;overflow-y:hidden;}

    .hdhcmscenter{width:400px; height:auto; float:left; border-right:0px solid #000; border-top:1px solid #000}

    .hdhcmscentermain{width:100%; overflow-x:hidden; background:buttonface;}

    .hdhcmstitle{width:618px!important; width:620px}

    .hdhcmscentermain table{width:600px;}

    .hdhcmscentermain table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}

    .hdhcmscentercontent{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}

    .hdhcmscentercontent table{width:600px; }

    .hdhcmscentercontent table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}

    .hdhcmstr{width:60px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}

    .hdhcmstr span{display:block;float:left; text-align:center; line-height:20px; border:1px solid #000; width:60px; height:20px}

    .hdhfixedright{float: left;height:200px!important;width:60px;overflow-y:hidden;}

  </style>

  <script>

   function aa(){

     var a=document.getElementById("cc").scrollTop;

     var b=document.getElementById("cc").scrollLeft;

     document.getElementById("dd").scrollTop=a;

     document.getElementById("dr").scrollTop=a;  

     document.getElementById("hh").scrollLeft=b;

   }

  </script>

  </head>

  <body>

  <div class="hdhall">

  <div class="hdhcmstl">

    <span class="xm">姓名</span><span class="sj">手机号码</span>

    <div class="hdhfixedleft" id="dd">

      <table cellpadding="0" cellspacing="0" border="0" class="hdhfixedcontent">

        <tbody>

          <tr>

          <td style='width:60px;'>张三</td>

          <td>13532801376</td>

          </tr>

          <tr>

          <td>a2</td>

          <td>a2</td>

          </tr>

          <tr>

          <td>a3</td>

          <td>a3</td>

          </tr>

          <tr>

          <td>a4</td>

          <td>a4</td>

          </tr>

          <tr>

          <td>a5</td>

          <td>a5</td>

          </tr>

          <tr>

          <td>a6</td>

          <td>a6</td>

          </tr>

          <tr>

          <td>a7</td>

          <td>a7</td>

          </tr>

          <tr>

          <td>a8</td>

          <td>a8</td>

          </tr>

          <tr>

          <td>a9</td>

          <td>a9</td>

          </tr>

          <tr>

          <td>a10</td>

          <td>a10</td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

  <!--table-->

  <div class="hdhcmscenter">

    <div class="hdhcmscentermain" id="hh">

      <div class="hdhcmstitle">

        <table cellpadding="0" cellspacing="0" border="0">

         <tr>

          <td width="10%">标题A</td>

          <td width="20%">标题B</td>

          <td width="10%">标题C</td>

          <td width="20%">标题D</td>

          <td width="20%">标题E</td>

          <td width="300">标题F</td>

         </tr>

        </table>

      </div>

    </div>

    <div class="hdhcmscentercontent" id="cc" onscroll="aa()">

      <table cellpadding="0" cellspacing="0" border="0">

        <tr>

          <td width="10%">好得很</td>

          <td width="20%">好得很</td>

          <td width="10%">好得很</td>

          <td width="20%">好得很</td>

          <td width="20%">好得很</td>

          <td width="300">好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

        <tr>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

          <td>好得很</td>

        </tr>

      </table>

    </div>

  </div>

  

  <div class="hdhcmstr">

    <span>管理</span>

    <div class="hdhfixedright" id="dr">

      <table cellpadding="0" cellspacing="0" border="0" class="hdhfixedcontent">

        <tbody>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

          <tr>

          <td>修改 删除</td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

  

</div>

  </body>

</html>


扩充阅读

相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮