表格：头部和首列固定、上下左右联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>联动表格</title>
<style>
html,body,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
li{
list-style: none;
}
html{
height: 100%;
font-size: 62.5%;
}
body{
color: #333;
background: #fff;
height: 100%;
font-size: 1.4rem;
}
.fund{
padding-top: 7.5rem;
}
.fixed-header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: #fff;
}
.header{
position: relative;
}
.header::after{
content: '';
position: absolute;
top: 0;
right: 0;
height: 4.5rem;
box-shadow: 0px 0 10px 10px #fff;
z-index: 10;
}
.tabs{
font-size: 0;
padding-right: 1rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar{
display: none;
}
.tabs>li{
display: inline-block;
width: 18%;
height: 4rem;
line-height: 4rem;
font-size: 1.5rem;
color: #646464;
text-align: center;
}
.tabs>li.active{
color: #3074c2;
position: relative;
}
.tabs>li.active::after{
content: '';
position: absolute;
bottom: 0.2rem;
left: 50%;
width: 2rem;
height: 0.3rem;
border-radius: 0.15rem;
background: #3074c2;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.thead{
background: #f7f8fa;
position: relative;
}
.thead>ul>li{
font-size: 1.2rem;
}
.thead-l>li{
height: 3.5rem;
line-height: 3.5rem;
width: 25%;
text-align: center;
}
.thead-r{
position: absolute;
top: 0;
left: 25%;
right: 1.5rem;
bottom: 0;
z-index: 9;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.thead-r::-webkit-scrollbar{
display: none;
}
.thead-r>li{
display: inline-block;
width: 30%;
text-align: center;
font-size: 1.3rem;
color: #666;
height: 3.5rem;
line-height: 3.5rem;
}
.thead-r>li>i{
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: middle;
position: relative;
bottom: 0.2rem;
margin-left: 0.1rem;
background-size: 100% 100%;
visibility: hidden;
}
.thead-r>li>i.order-up{
background-image: url(../img/order-up.png);
visibility: visible;
}
.thead-r>li>i.order-down{
background-image: url(../img/order-down.png);
visibility: visible;
}
.container{
position: relative;
}
.line{
padding: 0.5rem 0 0.5rem 0;
position: relative;
box-sizing: border-box;
}
.line:after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: #efefef;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
.title {
width: 25%;
box-sizing: border-box;
padding-left: 1.7rem;
}
.fixed-box{
position: absolute;
top: 0;
left: 25%;
right: 1.5rem;
bottom: 0;
z-index: 9;
overflow-x: auto;
}
.fixed-box::-webkit-scrollbar{
display: none;
}
.fixed-box>ul{
white-space: nowrap;
font-size: 0;
}
.fixed-box>ul>li{
display: inline-block;
width: 30%;
text-align: center;
font-size: 1.3rem;
}
</style>
</head>
<body>
<div class="fund">
<div class="fixed-header">
<div class="header">
<ul class="tabs">
<li class="active">全部</li>
<li>股票</li>
<li>债券</li>
<li>混合</li>
<li>货币</li>
<li>QDII</li>
<li>短期理财</li>
</ul>
</div>
<div class="thead">
<ul class="thead-l">
<li>名称/代码</li>
</ul>
<ul class="thead-r">
<li>质押比例<i class="order-down"></i></li>
<li>质押市值<i></i></li>
<li>质押股数<i></i></li>
<li>质押笔数<i></i></li>
<li>涨幅<i></i></li>
<li>押数<i></i></li>
<li>所属行业<i></i></li>
</ul>
</div>
</div>
<div class="container">
<div class="fixed-box">
</div>
</div>
</div>
<script src="https://cdnjs.gtimg.com/cdnjs/libs/zepto/1.1.4/zepto.min.js"></script>
<script>
// 头部切换
$('.tabs').on('click', 'li', function() {
$(this).addClass('active').siblings().removeClass('active');
});
// 排序
$('.thead-r').on('click', 'li', function() {
var child = $(this).children('i');
console.log(child);
if (child.hasClass('order-down')) {
child.addClass('order-up').removeClass('order-down');
} else {
child.addClass('order-down');
}
$(this).siblings().children('i').removeClass('order-down').removeClass('order-up');
});
// 添加DOM
var container = document.querySelector('.container')
var box = document.querySelector('.fixed-box')
for (var i = 0; i < 20; i ++) {
var $ul = document.createElement('ul');
$ul.setAttribute('class', 'line');
$ul.innerHTML = `<div class="title"><li>藏格控股${i+1}</li><li>000408</li></div>`
container.insertBefore($ul, box)
var $fixLine = document.createElement('ul');
$fixLine.setAttribute('class', 'fixed-line');
$fixLine.innerHTML = `<li>77.96%</li>
<li>168.33亿</li>
<li>15.54亿</li>
<li>32</li>
<li>1.75%</li>
<li>392万</li>
<li>化学原料</li>`
box.appendChild($fixLine)
}
// 计算行高
var arrLeft = []
var leftUl = document.getElementsByClassName('line')
for (var i = 0; i < leftUl.length; i ++) {
arrLeft.push(getComputedStyle(leftUl[i]).height)
}
var rightUl = document.getElementsByClassName('fixed-line')
for (var i = 0; i < rightUl.length; i ++) {
rightUl[i].style.height = arrLeft[i]
rightUl[i].style.lineHeight = arrLeft[i]
}
// 上下左右联动
var $thead = document.querySelector('.thead-r'),
$tbody = document.querySelector('.fixed-box');
$tbody.addEventListener('scroll', function() {
$thead.scrollLeft = this.scrollLeft
});
$thead.addEventListener('touchmove', function(e) {
e.preventDefault()
})
</script>
</body>
</html>
