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

最新推荐文章于 2023-02-13 22:05:30 发布
最新推荐文章于 2023-02-13 22:05:30 发布
阅读量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实现表格宽度任意竖轴滚动时表头固定
qq_32109661的博客
12-30 664
前言： 在实际项目开发中遇到类似需求，本来想当然地用**table-layout** ，但是这个属性并不能很好的应用在任意宽度的表格上。至于其他解决方案就是给td手动设置固定宽度，这种方法并不具有通用性，但是给我提供了一个思路，自动计算并设置表格宽度就可以很好地实现想要的效果。 DOM结构 <div class="table_area"> <div class="table_head"> <table> <tr>
js实现table表头冻结（scroll时固定）
zp19860529的博客
08-14 2633
方案一： 思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
原生JS实现table列宽调整
weixin_42689830的博客
02-13 905
table
js固定表格表头（高扩展性）
qq_36608036的博客
04-29 882
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
js固定表头的实现（转）
weixin_34309435的博客
05-18 130
　原文链接：http://www.th7.cn/web/js/201509/121055.shtml    参考链接：http://www.jb51.net/article/102568.htm 写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为demo代码实现： &lt;table&gt; &lt;thead class="h...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery的库文件、Bootstrap的样式文件以及bootstrap-table自身的样式和脚本文件。如果需要实现列固定，还需要...
Vue多种方法实现表头和首列固定的示例代码
08-28
实现表头和首列固定的功能需要我们具备一定的 JavaScript 和 CSS 知识，以及 Vue 框架的基本使用方法。通过本篇文章，我们可以学习到多种方法来实现表头和首列固定的功能，这对大型表格来说非常重要。
js实现table 表头顶部固定方法
这么多柠檬c
02-06 1886
业务需求需要顶部固定表头方式实现。 <div> <div class="table-head" style="margin-bottom: -20px;"> <table class="table table-striped"> <thead> <th>期数</th> <th>时间</th>
css列名不动_html css将表头固定的最直接的方法
weixin_39750195的博客
12-20 196
position属性取值为fixed时，则元素的位置将不受滚动条的影响，而是直接依据窗口定位，这就是将表头固定的最直接方法，网上其他途径感觉都是在走弯路。但是与此同时必须解决两个问题。第一：表体将随之不依据表头定位，而是依据body元素定位，因此表体将上移，导致表体靠上部分被表头遮挡,而且有重影。第二：表体的宽高和表头的宽高也将互相独立不再受文档流的约束，这导致单元格对不齐。解决办法示例如下。其中...
HTML,JSP,JQ,JS冻结表单的表头和侧栏；
11-24
HTML,JSP,JQ,JS冻结表单的表头和侧栏；表头冻结；固定表头；冻结表单； 简单实用；累死EXCEL那样的冻结；浏览器兼容；
jsp表头相对固定的2种方法
04-13
利用css设置实现表头的固定效果，提供2种，一种横纵都可以固定，一种是单一固定横坐标
纯CSS固定表头内容滚动表格
01-20
绝对可用的纯CSS固定表头样式，适用多种浏览器，实例的方式展示，我们公司开发的应用软件就用的是这种固定表头的样式
前端表格表头固定
风云无忌的博客
07-20 2885
 首先，我们先看下我的html代码，我获取json数据的方法没有用框架，直接循环读取的json数据用于前台展示，个人建议不要这样弄，因为特别耗费浏览器性能。如果多刷新几次页面，后台会报，sql语句找不到表或视图。我不知道有没有这方面原因，但是建议不要用。 &lt;div id="xxzl" style="width: 100%;height: 470px;"&gt; &lt;table...
[html][jQuery]表头固定在顶部的一种实现思路
我是涛锅
06-29 5783
有时候当碰到要显示很多行又很多列的表格的时候，往往在翻到后面的时候已经对不上某一列是什么了。 所以需要将表头固定在顶部，而且是在滚动到表头被遮住的时候，才固定到顶部。先看效果图再讲一下我的实现思路 通过一个额外的table来显示固定顶端的表头，当滚动条滚动到某一位置（原数据表头被遮盖）的时候，显示这个固定的表头，反之则隐藏。 首先是显示数据的表格<table id="tMain"> <
html表头固定原理,表头固定(利用jquery实现原理介绍)
weixin_39692271的博客
05-31 383
表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表格就无从下手。而且例子中大多只能满足限定高度的情况，如果限定宽度，出现横向滚动条就无能为力了。我的目的就是要像jquery-ui那样，找到页面上存在的表格，调用一个方法就可以实现固定表头的功能。趁着动手学习写jquery插件...
表头列头固定页面
Sara的专栏
01-21 1044
该文章主要是写了一个table页面,并固定表头或者列头,以达到excel冻结列的效果,主要使用的js的scrollTop,scrollLeft. 一.js中scrollTop及scrollLeft的使用说明 scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。例如:外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“
关于jsp页面表格表头固定，随着下拉条表头移动
lijunjie818的博客
08-18 6364
在项目中碰见jsp页面遍历数据过多，下拉后看不见表头，如果用easyUi就不存在固定表头问题了。 如果是单纯的table，遍历，那么我们可以引用bootstrap中的滚动监听来控制。 在页面引入            在body中引入                                                
jsp table实现表头固定，并且表头和内容对齐
keep12moving的博客
12-18 4592
overflow-y:scroll 实现滚动条，标签使表头和内容对齐，代码如下 航线 航班号 起飞时刻 机型 标准票价 单班飞行小时 班次 提供座位数 合计旅客数 合计收入 班收入 客座率 票价水平 人均票价 标准票价客座率 座公里收入 客公里
js实现表头固定,并且表头宽度可调整的完整代码
最新发布
09-19
### 回答1： 以下是一个实现固定表头并且表头宽度可调整的完整代码示例： HTML代码： ```html <div class="table-container"> <table> <thead> <tr> <th style="width: 100px;">Header 1</th> <th style="width: 150px;">Header 2</th> <th style="width: 200px;">Header 3</th> <th style="width: 250px;">Header 4</th> <th style="width: 300px;">Header 5</th> </tr> </thead> <tbody> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</td> <td>Row 1 Column 4</td> <td>Row 1 Column 5</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</td> <td>Row 2 Column 4</td> <td>Row 2 Column 5</td> </tr> <tr> <td>Row 3 Column 1</td> <td>Row 3 Column 2</td> <td>Row 3 Column 3</td> <td>Row 3 Column 4</td> <td>Row 3 Column 5</td> </tr> <tr> <td>Row 4 Column 1</td> <td>Row 4 Column 2</td> <td>Row 4 Column 3</td> <td>Row 4 Column 4</td> <td>Row 4 Column 5</td> </tr> <tr> <td>Row 5 Column 1</td> <td>Row 5 Column 2</td> <td>Row 5 Column 3</td> <td>Row 5 Column 4</td> <td>Row 5 Column 5</td> </tr> <tr> <td>Row 6 Column 1</td> <td>Row 6 Column 2</td> <td>Row 6 Column 3</td> <td>Row 6 Column 4</td> <td>Row 6 Column 5</td> </tr> </tbody> </table> </div> ``` CSS代码： ```css .table-container { position: relative; max-width: 100%; overflow: auto; } table { border-collapse: collapse; width: 100%; table-layout: fixed; } thead th { position: sticky; top: 0; background-color: #fff; z-index: 1; } thead th, tbody td { padding: 10px; border: 1px solid #ccc; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .resize-handle { position: absolute; top: 0; right: -5px; bottom: 0; width: 10px; cursor: col-resize; z-index: 2; } ``` JavaScript代码： ```javascript const table = document.querySelector('table'); const thead = table.querySelector('thead'); const tbody = table.querySelector('tbody'); const ths = thead.querySelectorAll('th'); const resizeHandler = (e) => { const th = e.target.parentNode; const index = Array.from(ths).indexOf(th); const cells = table.querySelectorAll(`tr > *:nth-child(${index + 1})`); const rect = th.getBoundingClientRect(); const startX = e.pageX; const minWidth = parseInt(window.getComputedStyle(th).minWidth) || 20; const mousemoveHandler = (e) => { const dx = e.pageX - startX; const width = rect.width + dx; if (width > minWidth) { th.style.width = `${width}px`; for (const cell of cells) { cell.style.width = `${width}px`; } } }; const mouseupHandler = () => { document.removeEventListener('mousemove', mousemoveHandler); document.removeEventListener('mouseup', mouseupHandler); }; document.addEventListener('mousemove', mousemoveHandler); document.addEventListener('mouseup', mouseupHandler); }; for (const th of ths) { const resizeHandle = document.createElement('div'); resizeHandle.classList.add('resize-handle'); th.appendChild(resizeHandle); th.addEventListener('mousedown', resizeHandler); } ``` 这个代码实现了以下功能： 1. 表头固定在页面顶部，当用户向下滚动时，表头仍然可见。 2. 表头宽度可调整，用户可以通过拖动表头右侧的调整器来调整列宽。 3. 当用户调整列宽时，表格中的所有单元格宽度也会相应地调整。 请注意，这个代码示例仅限于固定单个表格的表头。如果您需要在页面上同时固定多个表格的表头，或者需要其他复杂的功能，您可能需要使用更全面的解决方案，如jQuery插件等。 ### 回答2： 实现表头固定并且表头宽度可调整的完整代码需要使用到JavaScript和CSS。 以下是一个简单的实现示例： HTML部分： ```html <div class="table-container"> <table id="my-table"> <thead> <tr> <th style="width: 200px;">列1</th> <th style="width: 200px;">列2</th> <th style="width: 200px;">列3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <!-- 其他行数据 --> </tbody> </table> </div> ``` CSS部分： ```css .table-container { overflow: auto; height: 300px; } #my-table th { position: sticky; top: 0; background-color: #fff; z-index: 1; } #my-table td, #my-table th { padding: 10px; border: 1px solid #ccc; } ``` JavaScript部分： ```javascript window.addEventListener('DOMContentLoaded', function() { var tableContainer = document.querySelector('.table-container'); var table = document.getElementById('my-table'); tableContainer.addEventListener('scroll', function() { var translate = 'translate(0,' + this.scrollTop + 'px)'; table.querySelector('thead').style.transform = translate; }); var resizeTh = null; var startX = 0; var startWidth = 0; function initResize(element) { element.addEventListener('mousedown', function(e) { resizeTh = this; startX = e.pageX; startWidth = parseInt( window.getComputedStyle(resizeTh).getPropertyValue('width') ); }); document.addEventListener('mousemove', function(e) { if (resizeTh) { var width = startWidth + (e.pageX - startX); resizeTh.style.width = width + 'px'; } }); document.addEventListener('mouseup', function() { resizeTh = null; }); } var headers = table.querySelectorAll('th'); headers.forEach(function(header) { initResize(header); }); }); ``` 以上代码实现了表头固定和表头宽度可调整的功能。表格内容超出容器高度时，容器将出现滚动条，而表头将保持固定可见。你还可以通过拖动表头分隔符来调整各列的宽度。注意，需要在容器的CSS样式中设置固定的高度。 ### 回答3： 以下是使用JavaScript实现表头固定，并且表头宽度可调整的完整代码： ```html <!DOCTYPE html> <html> <head> <title>表头固定</title> <style> .table-container { overflow: auto; max-height: 300px; } .table-header { position: sticky; top: 0; background-color: #f9f9f9; } .table-header th { padding: 10px; } .table-content td { padding: 10px; } .resize-handle { position: absolute; top: 0; right: -5px; bottom: 0; width: 10px; cursor: col-resize; background-color: #ddd; } </style> </head> <body> <div class="table-container"> <table> <thead class="table-header"> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody class="table-content"> <tr> <td>行1, 列1</td> <td>行1, 列2</td> <td>行1, 列3</td> </tr> <tr> <td>行2, 列1</td> <td>行2, 列2</td> <td>行2, 列3</td> </tr> <!-- 可以添加更多的数据行 --> </tbody> </table> </div> <script> document.addEventListener('DOMContentLoaded', function() { var tableContainer = document.querySelector('.table-container'); var tableHeader = document.querySelector('.table-header'); var resizeHandle = document.createElement('div'); var isResizing = false; var prevX = 0; var currentTh = null; resizeHandle.className = 'resize-handle'; tableHeader.appendChild(resizeHandle); resizeHandle.style.display = 'none'; // 监听窗口滚动事件 tableContainer.addEventListener('scroll', function() { tableHeader.style.transform = 'translate(0px,' + this.scrollTop + 'px)'; }); // 监听鼠标按下事件 resizeHandle.addEventListener('mousedown', function(e) { isResizing = true; prevX = e.clientX; currentTh = e.target.previousElementSibling; }); // 监听鼠标移动事件 document.addEventListener('mousemove', function(e) { if (isResizing) { var dx = e.clientX - prevX; var newWidth = currentTh.offsetWidth + dx; currentTh.style.width = newWidth + 'px'; prevX = e.clientX; } }); // 监听鼠标放开事件 document.addEventListener('mouseup', function() { isResizing = false; }); // 监听窗口调整事件 window.addEventListener('resize', function() { tableContainer.style.width = tableHeader.offsetWidth + 'px'; }); tableContainer.style.width = tableHeader.offsetWidth + 'px'; }); </script> </body> </html> ``` 以上代码实现了一个具有固定表头和可调整宽度的表格。表格的高度会自动适应容器的最大高度，同时当表格内容过长时，可以通过滚动来查看所有内容。通过在表头的列之间拖动分隔线，可以调整每列的宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值