首页
所有分类
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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 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
localStorage(1) virtualenv(1) scrapy(1) dataBinding(1) 注解(1) ip2region(1) Postman(1) DeOldify(1) 反射(1) BottomSheetDialog(1)
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php session 检测和注销
2009/03/16 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
php类常量用法实例分析
2015/07/09 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
javascript cookies操作集合
2010/04/12 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python运行DLL文件的方法
2020/01/17 Python
西班牙灯具网上商店：Lampara.es
2018/06/05 全球购物
工作收入住址证明
2014/10/28 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书