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

最新推荐文章于 2022-04-01 18:12:59 发布
最新推荐文章于 2022-04-01 18:12:59 发布
阅读量1.3k 收藏 2
点赞数

本文实例讲述了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" οnscrοll="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>
原文链接：http://www.jb51.net/article/102568.htm

JoneYoung_ts
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS固定表头和左边列（最新源码）1.9
03-31
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线， 修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题，有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能，修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时，锁定单元格错位的问题，修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度（锁定时，取实际的单元格宽度），当单元格的左右两边的borderWidth不一样时，会有一些错位 若单元格宽度是固定的，可以在第3个参数(config)中指定 isFixedSize:true 修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tbTopLeft的边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） .setCheckBoxSync 方法参数说明：4种参数 1) 复选框控件（html object）数组 2) 复选框控件（html object） 3) 复选框控件ID (string) 4) 空参数（尽量不用空参数）
JS冻结表头和列
05-01
NULL 博文链接：https://pengjj2.iteye.com/blog/2405952
FastAdmin增加bootstrap-table-fixed-columns冻结表头，及完善排序、列宽、合并行等问题
穿拖鞋写程序
03-05 4205
使用FastAdmin快速创建应用管理系统有一段时间了，不得不说在一些中小型应用领域使用起来非常快捷、有效和实用，对于一些需要前期快速验证的项目也会是很好的选择。闲言少叙，以下总结最近一个表格前端效果的实战经验。 FastAdmin使用bootstrap-table作为前端表格的基础组件库，通常列表交互展示已经够用了，包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结，找...
birt系列（1）--冻结表头
wh_xia_jun的专栏
07-08 2377
小厂，用的开源birt做报表，不太符合用户对报表的操作习惯。 用户对报表希望： 自定义显示、隐藏列； 自定义报表列的显示顺序； 自定义报表列宽度； 按用户选择的列对表格数据排序 冻结表头 所有冻结表头，都是把表头元素设置成绝对定位，在页面滚动的时候，根据滚动值修正元素top值。 冻结表头的实现1:普通列表的表头冻结 结表头的实现2:单层交叉列表的表头冻结---交叉表头固定的情况 ...
HTML 表格滚动锁定表头，实现固定行列
热门推荐
qq_25775675的博客
04-01 1万+
这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。 主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。
Excel2016如何固定表头，如何使前两行保持在最前端
神芷迦蓝寺
03-30 9870
excel固定表头很简单，只需要视图-冻结窗格-冻结首行，冻结首列与之类似 那么如何使前两行保持在最前端，也就是冻结前两行，如果按照步骤选中前两行，点击冻结窗格，会自动冻结+1行，也就是第三行，这种情况无法满足我们的需求 由此，这个时候我们可以选中第三行，选择冻结窗格，那么前两行就被冻结了，始终保持在最前端 想让前n行保持在最前端，就选中第n+1行，选择冻结窗格，对于列操作与此一样 ...
js实现table表头冻结（scroll时固定）
zp19860529的博客
08-14 2421
方案一： 思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
js固定表头的实现（转）
weixin_34309435的博客
05-18 120
　原文链接：http://www.th7.cn/web/js/201509/121055.shtml    参考链接：http://www.jb51.net/article/102568.htm 写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为demo代码实现： &lt;table&gt; &lt;thead class="h...
js实现table 表头顶部固定方法
这么多柠檬c
02-06 1818
业务需求需要顶部固定表头方式实现。 <div> <div class="table-head" style="margin-bottom: -20px;"> <table class="table table-striped"> <thead> <th>期数</th> <th>时间</th>
JS实现表头冻结
·Lee
09-05 1892
废代码待删除 Pure CSS Scrollable Table with Fixed Header <!-- function removeClassName (elem, className) { elem.className = elem.className.replace(className, "").trim(); } function addCSSClass (elem
css 固定列头,表格头部固定和表格列固定
weixin_39893728的博客
08-04 600
我不是前端大神，只是偶尔在开发系统时，需要用到表格。如果表格只需要单独的用来展现数据，那就很简单了，那如果需要实现复杂的样式呢？比如说表头固定，当网页滚动的时候，表头自动固定到网页顶部，这样很客观的展现了每列的内容。表头固定和列固定，需要用到jQuery DataTables(我不是前端大神，就懒一点，用下框架，偶尔用下框架，开发时间也节省了嘛，嘿嘿 ^_^)，没错，又是我前面介绍的DataTab...
JS冻结表格,锁定表头,固定行列（上下左右4个方向）
11-12
JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，调用方法比较简单，具体调用方法请参考示例。
HTML,JSP,JQ,JS冻结表单的表头和侧栏
10-29
HTML,JSP,JQ,JS冻结表单的表头和侧栏
JS自定义的select控件
08-26
本JS脚本是自定义了一个select 目的主要有三个: 1, 美化SELECT 2, 有时候页面上保留了很窄的地方需要写一个SELECT而SELECT下拉列表中的OPTION内容 又很长,往往显示不完整,用这个脚本new SelectView('','','','')第二个参数是上面文本框的宽度,主要是第三个参数,如果不设置就默认和文本框宽度一样 就相当于一般的SELECT,如果设置大于上面文本框宽度就可以显示OPTION内容比较长的项目了，不会出现看不完整的情况. 3, 支持可编辑属性,
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
JavaScript实现两个Table固定表头根据页面大小自行调整
10-26
正如标题所言两个Table固定表头，可根据页面大小自行调整使用JavaScript实现，具体的示例如下，感兴趣的朋友可以参考下
《JavaScript实例精通》[源代码]
09-21
示例描述：JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...
JavaScript实例精通
01-11
示例描述：JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...
js实现表头固定,并且表头宽度可调整的完整代码
最新发布
09-19
实现表头固定并且表头宽度可调整的完整代码需要使用到JavaScript和CSS。 以下是一个简单的实现示例： HTML部分： ```html ;">列1 ;">列2 ;">列3 数据1 数据2 数据3 <!-- 其他行数据 --> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值