首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

Sara

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
javascript 跳转代码集合
Dec 03 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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
东方红(1) YB400(2) YB217(1) 直流胆(1) 再生机(1) YB235(1) MX500(1) 1 Tube Radio(1) 森海(1) PL-365(1)
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
PHP设计模式（九）外观模式Facade实例详解【结构型】
2020/05/02 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JsRender for object语法简介
2014/10/31 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
详解XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
javascript绘制简单钟表效果
2020/04/07 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python生成随机图形验证码详解
2017/11/08 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
什么是事务？事务有哪些性质？
2012/03/11 面试题
员工自我鉴定范文
2013/10/06 职场文书
承办会议欢迎词
2014/01/17 职场文书
房地产端午节活动方案
2014/08/24 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
领导班子对照检查材料
2014/09/22 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang