表格头部与左侧内容随滚动条位置改变而改变（基于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中银行列表选择,通讯录中快速定位到联系人选择的 ...
随机推荐
- yii2打印数据属性(字段名)/数据
yii2打印数据属性(字段名)/数据 单条数据: $model = $this->findModel($id);//打印字段名 $array = $model->attributes(); ...
- [洛谷U62358]求导函数
U62358 求导函数 题面 给出一个n次函数\(f(x)=a_{n}x^{n}+a_{n-1}x^{n-1}+...+a_{1}x+a_0\)的各项系数\(a_n,a_{n-1}...a_1,a_0 ...
- AES前后端加密
1.前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 团队项目："Jarvis For Chat"
"Jarvis For Chat"项目简介 项目详情信息已经在上一篇博客中详细给出,详请查看博客 团队成员 姓名 学号 张扬(队长) 031602345 苏韫月 031602631 ...
- Python3 数字Number（六）
Python 数字数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变数字数据类型得值,将重新分配内存空间. 以下实例在变量赋值时 Number 对象将被创建: var1 = 1 var ...
- web运行异常解决
端口占用: 在dos下,输入 netstat -ano|findstr 8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill /pid 6856 /f ...
- 安装visio 2010：您的计算机上的Office 2003安装已损坏，安装程序无法继续。请删除或修复office 2003产品并重新运行安装程序
您的计算机上的Office 2003安装已损坏,安装程序无法继续.请删除或修复office 2003产品并重新运行安装程序 最近打算安装visio 2010时出现 以下错误: “您的计算机上的Of ...
- [AOP] 7. 一些自定义的Aspect - Circuit Breaker
Circuit Breaker(断路器)模式 关于断路器模式是在微服务架构/远程调用环境下经常被使用到的一个模式.它的作用一言以蔽之就是提高系统的可用性,在出现的问题通过服务降级的手段来保证系统的整体 ...
- 余弦相似度及基于python的三种代码实现、与欧氏距离的区别
1.余弦相似度可用来计算两个向量的相似程度 对于如何计算两个向量的相似程度问题,可以把这它们想象成空间中的两条线段,都是从原点([0, 0, ...])出发,指向不同的方向.两条线段之间形成一个夹角, ...
- linux 文件上传&软件安装(rpm)
文件的上传与下载(linux -linux ) 实例1:从远处复制文件到本地目录命令:scp root@192.168.120.204:/opt/soft/nginx-0.5.38.tar.gz /o ...