表格头部与左侧内容随滚动条位置改变而改变（基于jQuery）
效果图如下：
HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格头部与左侧内容随滚动条位置改变而改变（基于jQuery）</title>
<style>
* {
margin: 0;
padding: 0;
}
.display-none {
display: none;
}
.container {
width: 600px;
height: 600px;
overflow: auto;
}
.content {
width: 3000px;
height: 1200px;
}
table {
position: relative;
border-collapse: collapse;
font-size: 13px;
}
table, td, th {
text-align: left;
line-height: 40px;
border: 1px solid black;
}
table th {
background-color: #ededed;
}
.copyThead {
position: absolute;
top: 0;
left: 1px;
background-color: #ededed;
width: 100%;
}
.copyThead th:first-child {
border-left: 0;
}
.copyMenu {
position: absolute;
top: 0;
left: 0;
background-color: #ededed;
}
.position-th {
position: absolute;
top: 0;
left: 0;
background-color: #ededed;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<table>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./data.js"></script>
<script>
$(function(){
// 渲染表头
let thHtml = '<th width="150" class="fixed-th">编号/姓名 技能</th>';
data.staff.forEach(function(item, index) {
thHtml += `<th width="100">${item.staffNumber} ${item.userName}</th>`;
})
$('table thead tr').html(thHtml); // 获取第一个表头的宽高
let fixedThWidth = $('.fixed-th').width();
let fixedThHeight = $('.fixed-th').height(); // 渲染表单内容
function renderTableBody() {
let tdHtml = '';
data.project.forEach(function(item, index) {
// 第一列
tdHtml += `<tr>
<th width="150">${item.projectName}</th>
`;
// 其余列
for(let i = 0; i < data.staff.length; i++){
tdHtml += `<td></td>`;
}
tdHtml += '</tr>';
})
$('table tbody').html(tdHtml);
}
renderTableBody(); // 设置content的宽度未table的宽度
$('.content').css('width', $('table').width() + 'px'); // 复制头部内容
let theadHtml = $('table thead').clone().addClass('copyThead display-none');
$('table').append(theadHtml); // 复制左侧内容
function copyLeftContent() {
let leftMenuHtml = `<tbody class="copyMenu display-none">
<th width="150" class="fixed-th">编号/姓名 技能</th>
<th width="150" class="fixed-th position-th">编号/姓名 技能</th>`;
data.project.forEach(function(item, index){
leftMenuHtml += `<tr>
<th width="150">${item.projectName}</th>
</tr>`;
})
leftMenuHtml += '</tbody>';
$('table').append(leftMenuHtml);
}
copyLeftContent(); // 设置好第一个表头的高度
$('.fixed-th').css('height', fixedThHeight + 'px'); // 设置左侧内容中的位置可变的第一个表头的行高
$('.position-th').css('line-height', fixedThHeight + 'px'); // 监听表格内容滚动事件
$('.container').scroll(function(){
let nowScrollTop = $(this).scrollTop(); //获取滚动条距顶部位置
let nowScrollLeft = $(this).scrollLeft(); //获取滚动条距左部位置
if(nowScrollTop > fixedThHeight){ //上下滚动位置是否已大于表头的高度 大于显示并设定top值 小于隐藏
$('.copyThead').removeClass('display-none').css('top', nowScrollTop);
$('.position-th').css('top', nowScrollTop);
}else{
$('.copyThead').addClass('display-none').css('top', 0);
$('.position-th').css('top', 0);
}
if(nowScrollLeft > fixedThWidth){ //左右滚动位置是否已大于左侧内容的宽度 大于显示并设定left值 小于隐藏
$('.copyMenu').removeClass('display-none').css('left', nowScrollLeft);
}else{
$('.copyMenu').addClass('display-none').css('left', 0);
}
})
})
</script>
</body>
</html>
data.js代码：
var data = {
"status": 100,
"msg": "操作成功",
"projectTotal": 2900,
"total": 2900,
"project": [
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
},
{
"projectId": 46533,
"projectName": "天马流星拳好厉害"
}
],
"staff": [
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
},
{
"staffNumber": "465132132465",
"userId": 453134,
"userName": "哆啦A梦"
}
]
}
表格头部与左侧内容随滚动条位置改变而改变（基于jQuery）的更多相关文章
- WPF——文本随滚动条改变而改变
一.造一个窗体,拖进一个文本框TextBox和滚动条Slider 二.让文本框的内容随滚动条的滚动而改变,即文本框绑定到滚动条上 三.实现效果
- Css 设置固定表格头部，内容可滚动
效果图:
- C# datagridview 这是滚动条位置
1.datagridview 设置 表格内容铺满,内容自动换行 dataGridView1.DefaultCellStyle.WrapMode = DataGridViewTriState.True; ...
- WebStorage记录滚动条位置
因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...
- python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动
左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- delphi 如何让ScrollBox的内容与滚动条一起实时滚动
delphi 如何让ScrollBox的内容与滚动条一起实时滚动 拖动滚动条后只有释放鼠标键,ScrollBox的内容才会滚动到实际位置,不爽.请问高人,怎样才能使拖动ScrollBox的滚动条的同时 ...
- jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接 原创 201 ...
- ant design 中实现表格头部可删除和添加
我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...
- js--获取滚动条位置，并实现页面滑动到锚点位置
前言 这篇来记录下最近工作中遇到的一个问题,在app原生和前端h5混合开发的过程中,其中一个页面是选择城市列表的页面,类似于美团饿了么城市选择,银行app中银行列表选择,通讯录中快速定位到联系人选择的 ...
随机推荐
- Oracle Procedure记录
1.定义 所谓存储过程(Procedure),就是一组用于完成特定数据库功能的SQL语句集,该SQL语句集经过 编译后存储在数据库系统中.在使用时候,用户通过指定已经定义的存储过程名字并给出相应的存储 ...
- Kali之aircrack-ng
本机装好设备及驱动 电脑本机装好Realtek RTL8187 Wireless驱动连接好USB无线驱动 把设备转接给虚拟机 win+R,启动VMware USB Arbitration Servic ...
- Attribute 'items' must be an array, a Collection or a Map错误解决！
唉!真的要说一句话叫做论一串代码的重要性!就是如此的气人!气的牙根痒痒! 前几天刚刚写过SpringMVC之ModelAndView的 jsp值在浏览页面不显示的问题!也是因为这一串代码,但是这一次一 ...
- 数据挖掘之Python调用R包、函数、脚本
Python中集成R :参考博客http://blog.csdn.net/weidelight/article/details/44946785
- Python绘图技巧
转自:https://www.cnblogs.com/zhizhan/p/5615947.html Python--matplotlib绘图可视化知识点整理 强烈推荐ipython 原文:http:/ ...
- 如何把数字字符'1'转换为整数（java 实现）
在一些表达式计算时,如 “3+2” 表达式自身是个字符串,通过切片得到的是数字字符和操作符,不能直接进行计算,在表达式计算中需要进行一步操作是,把数字字符'2','3'转化为整数. 如何操作? ...
- HDU 4739 Zhuge Liang's Mines (状态压缩+背包DP)
题意 给定平面直角坐标系内的N(N <= 20)个点,每四个点构成一个正方形可以消去,问最多可以消去几个点. 思路 比赛的时候暴力dfs+O(n^4)枚举写过了--无意间看到有题解用状压DP(这 ...
- Using Oracle Database In-Memory with Oracle E-Business Suite
Database In-Memory is one of a number of options that can be deployed to address Oracle E-Business S ...
- html中引入另一个html文件
https://segmentfault.com/q/1010000002954318
- 转载:【Oracle 集群】RAC知识图文详细教程(五)--特殊问题和实战经验
文章导航 集群概念介绍(一) ORACLE集群概念和原理(二) RAC 工作原理和相关组件(三) 缓存融合技术(四) RAC 特殊问题和实战经验(五) ORACLE 11 G版本2 RAC在LINUX ...