表格：头部和首列固定、上下左右联动

最新推荐文章于 2023-05-30 14:31:47 发布

arhyllcu603969

最新推荐文章于 2023-05-30 14:31:47 发布

阅读量177

点赞数

原文链接：http://www.cnblogs.com/Yicoding/p/10435314.html

版权

<!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 1.7rem;
      width: 25%;
      box-sizing: border-box;
    }
    .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="../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 = `<li>藏格控股${i+1}</li><li>000408</li>`
      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>

转载于:https://www.cnblogs.com/Yicoding/p/10435314.html

arhyllcu603969

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格：头部和首列固定、上下左右联动

<!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...
复制链接

扫一扫