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 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
微信小程序实现打卡签到页面
Sep 21 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
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
详解vue组件开发脚手架
2018/06/15 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
详解Python中的type和object
2018/08/15 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
英语生日邀请函
2014/01/23 职场文书
函授自我鉴定范文
2014/02/06 职场文书
物流业务员岗位职责
2014/02/08 职场文书
书香校园活动方案
2014/02/28 职场文书
青春奉献演讲稿
2014/05/08 职场文书
社区禁毒工作方案
2014/06/02 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
学生病假条怎么写
2015/08/17 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers