首页
所有分类
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使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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) 事务并发(1) DNS服务器(2) 复读(1) GZIP(2) IIS7(1) FTP服务器(1) .NET Framework(2) 界面设计(1) DBLink(1)
You might like
PHP新手上路（八）
2006/10/09 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
jQuery学习笔记之 Ajax操作篇（三） - 过程处理
2014/06/23 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
编程语言Python的发展史
2014/09/26 Python
python学生管理系统学习笔记
2019/03/19 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
实习教师自我鉴定
2013/09/27 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
护士自我评价范文
2014/01/25 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书