表格头部与左侧内容随滚动条位置改变而改变（基于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中银行列表选择,通讯录中快速定位到联系人选择的 ...
随机推荐
- Linux命令详解-rm
rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所有文件及子目录均删除.对于链接文件,只是删除了链接,原有文件均保持不变. rm是一个危险的命 ...
- HighCharts 特性；Highcharts 环境配置
Highcharts Highcharts 是一个用纯JavaScript编写的一个图表库. Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highchart ...
- datagrid与DropDownList关联使用
最近做一个页面需要用到这个两个控件,之前虽然看过,但是没有动手实践过.突然要做这么一个页面,并用上,真的有点着急.于是乎,网上疯狂找datagrid与DropDownList 的例子,找了很多很多,看 ...
- CSS3 文本超出后显示省略号...
纯用CSS实现,主要采用代码 overflow:hidden; text-overflow:ellipsis;//这是让文本溢出后,显示成省略号. white-space:nowrap;//禁止自动换 ...
- 【javascript基础】函数前面的一元操作符
在函数前面加:+ ; ~ ! - 等等一元操作符,javascript 引擎都会将后面的statement转换成表达式(expression),这样就可以调用了.
- droppable放置组件
Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...
- Fiddler进行模拟Post提交json数据，总为null解决方式（转）
原文链接:http://www.cnblogs.com/jys509/p/3550598.html Request Headers: User-Agent: FiddlerHost: localhos ...
- 原生js重写《锋利的JS》之 轮播效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MySQL学习(一): MySQL的初步操作与命令
启动与关闭: 用管理员身份运行cmd 启动:net start mysql57 其中mysql57是我的MySQL名称,版本不同名称可能不一样 关闭:net stop mysql57 与上面同理 登录 ...
- Alt+Shift+R组合键，用来在一个java文件中批量的重命名变量。
myeclipse和eclipse集成编译软件,都提供了一个快捷键用来批量重命名变量:Alt+Shift+R组合键,用来在一个java文件中批量的重命名变量.扩展知识:如果想要重命名文件名,又不想手动 ...