JS实现的表头列头固定页面功能示例


Posted in Javascript onJanuary 10, 2017

本文实例讲述了JS实现的表头列头固定页面功能。分享给大家供大家参考,具体如下:

这里的示例演示了一个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;}
    .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
    .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
    .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
    .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
    .dd{height:200px!important; height:208px; overflow-y:hidden;}
    .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
    .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
    .ee{width:618px!important; width:620px}
    .t_i_h table{width:600px;}
    .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
    .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
    .cc table{width:600px; }
    .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
  </style>
  <script>
   function aa(){
     var a=document.getElementById("cc").scrollTop;
     var b=document.getElementById("cc").scrollLeft;
     document.getElementById("dd").scrollTop=a;
     document.getElementById("hh").scrollLeft=b;
   }
  </script>
  </head>
  <body>
  <div class="t_n">
    <span>序号</span>
    <div class="dd" id="dd">
      <table cellpadding="0" cellspacing="0" border="0" class="t_number">
        <tbody>
          <tr>
          <td>1</td>
          </tr>
          <tr>
          <td>2</td>
          </tr>
          <tr>
          <td>3</td>
          </tr>
          <tr>
          <td>4</td>
          </tr>
          <tr>
          <td>5</td>
          </tr>
          <tr>
          <td>6</td>
          </tr>
          <tr>
          <td>7</td>
          </tr>
          <tr>
          <td>8</td>
          </tr>
          <tr>
          <td>9</td>
          </tr>
          <tr>
          <td>10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!--table-->
  <div class="t_i">
    <div class="t_i_h" id="hh">
      <div class="ee">
        <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="20%">标题F</td>
         </tr>
        </table>
      </div>
    </div>
    <div class="cc" id="cc" onscroll="aa()">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="10%">1</td>
          <td width="20%">1</td>
          <td width="10%">1</td>
          <td width="20%">1</td>
          <td width="20%">1</td>
          <td width="20%">1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
        </tr>
        <tr>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
        </tr>
      </table>
    </div>
  </div>
  </body>
</html>

效果图如下:

JS实现的表头列头固定页面功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
一个可以显示阴历的JS代码
Mar 05 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 #Javascript
微信小程序 地图map详解及简单实例
Jan 10 #Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 #Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 #Javascript
jquery 正整数数字校验正则表达式
Jan 10 #Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 #Javascript
JS遍历对象属性的方法示例
Jan 10 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
十天学会php之第六天
2006/10/09 PHP
Php+SqlServer实现分页显示
2006/10/09 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
总结js函数相关知识点
2018/02/27 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python学习 流程控制语句详解
2016/06/01 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
什么时候用assert
2015/05/08 面试题
什么是servlet链?
2014/07/13 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
致裁判员加油稿
2014/02/08 职场文书
审计专业自荐信范文
2014/04/21 职场文书
迎国庆横幅标语
2014/10/08 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL