表格头部与左侧内容随滚动条位置改变而改变（基于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中银行列表选择,通讯录中快速定位到联系人选择的 ...
随机推荐
- 转 Java对日期Date类进行加减运算一二三
请移步,https://blog.csdn.net/hacker_lees/article/details/74351838 ,感谢博主分享
- linux-Centos7安装nginx
首先配置linux环境,我这里是刚刚装好linux,所以一次性安装了一系列我需要到的环境: yum install pcre pcre-devel zlib zlib-devel openssl op ...
- day37 爬虫2(web微信、高性能相关、Scrapy)
s16day37 爬虫2 参考博客:http://www.cnblogs.com/wupeiqi/articles/6229292.html 课堂代码:https://github.com/liyon ...
- Python中实现switchcase
# 第一种方式使用python中的字典# author:wanstack def first_func(): print('first_func') def second_func(): print( ...
- CSS布局 — 圣杯布局与双飞翼布局
圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...
- 005——数组(五)array_diff_ukey()array_diff_uassoc()array_intersect()array_intersect_assoc()array_intersect_key()array_intersect_ukey()array_intersect_uassoc()
<?php function dump($arr) { print_r($arr); } /**array_diff_ukey() 通过回调函数的方式,返回一个数组在其他数组中不存在键名的值 * ...
- 通过网页或Serverice远程系统网站（服务）所在服务器本地的应用程序（未成功）
近日接了一个奇葩需求,内容如题. 实现过程中遇到一些问题,特将实现过程记录于此,供备忘及参考. 首先尝试了正常启动进程的方法,代码如下: public string RunSPApp() { Proc ...
- 让nodejs在iis上运行
node在IIS上运行的好处: Tomasz的回答是我见过最棒的: 使用iisnode模块在IIS中托管node.js应用程序来取代自托管node.exe进程的优势在于: · 进程管理. Iisnod ...
- 一、html <!doctype>标签
一.html <!doctype>标签 定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYP ...
- PHP获取随机数的函数rand()和mt_rand()
rand()函数用户获取随机数,具体用法如下: rand()可以设置0个参数或者两个参数,如rand($min,$max),$min表示从XX开始取值,$max表示最大只能为XX 例如: <?p ...