表格头部与左侧内容随滚动条位置改变而改变（基于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中银行列表选择,通讯录中快速定位到联系人选择的 ...
随机推荐
- find命令中选项-path和-prune的使用
在Windows中可以在某些路径中查找文件,也可以设定不在某些路径中查找文件,下面用Linux中的find的命令结合其-path -prune参数来看看在Linux中怎么实现此功能.假如在当前目录下查 ...
- Windows、Ubuntu双系统正确卸载Ubuntu系统
先判断启动方式,以管理员身份打开cmd或者power shell,输入bcdedit,找到path那一行,如果是winload.efi就是uefi引导,若为exe就是legacy引导 或者win+r输 ...
- IOS-每个程序员的编程之路上都应该看这11本书
国外知名网站stackoverflow上有一个问题调查: 哪本书是对程序员最有影响.每个程序员都该阅读的书?,这个调查已历时两年,目前为止吸引了153,432人访问,读者共推荐出了478本书(还在增加 ...
- MySQLdb和PIL安装
最近将个人博客部署到树莓派上海真是颇费周折,尤其是在MySQLdb和PIL的安装上 MySQLdb 先说Windows吧(比较简单) 直接pip安装即可或者下载编译版更方便:http://source ...
- 当vue路由变化时 改变导航条式样
这个是导航栏: <router-link to="/unusedOrder"> <div class="">路由1</div> ...
- [转载]Java读取Excel中的单元格数据
目前网上能找到的读取Excel表格中数据的两种比较好的方案:PageOffice好用开发效率高:POI免费.供大家参考,针对具体情况选择具体方案. 1. PageOffice读取excel impor ...
- LeetCode OJ：Generate Parentheses（括号生成）
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- New Concept English three （23）
31w 45 People become quite illogical when they try to decide what can be eaten and what cannot be ea ...
- Hibernate报错：Caused by: java.sql.SQLException: Field 'ID' doesn't have a default value
问题一: 报错如下: org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assig ...
- 一个功能丰富的 jQuery 树形插件 z-tree
链接 如果你的树 很复杂, 需要拖拽功能, 还可以考虑用这个 另外还有一个目前在用 Dynatree 如果一般的树, 还是自己写一个, 也很轻松, 如果有一两个复杂的点, 可以参考ZTree