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中的isXX系列是否继续使用的分析
Apr 16 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
H5实现手机拍照和选择上传功能
Dec 18 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的5个入手程序
2006/11/23 PHP
PHP一些有意思的小区别
2006/12/06 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php实现上传图片文件代码
2015/07/19 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP asXML()函数讲解
2019/02/03 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
使用Python的turtle模块画图的方法
2017/11/15 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
超市中秋节促销方案
2014/03/21 职场文书
聘用意向书
2014/07/29 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技