表格元素悬浮

其他 2018-08-27 22:51:43 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35559756/article/details/80919897

表格元素悬浮

测试html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>固定表格的中固定标志控件组件的html</title>
  <script src="fixTableComponent.js"></script>
  <link rel="stylesheet" href="fixTableComponent.css">
</head>
<body>
<div class="content">
  <div id='tableGrid' style="width: 250px; height: 100px; overflow: scroll; margin: auto;" align='center'></div>
</div>
</body>
</html>

js:

fixTableComponent.js

// var contentId = "myBody";
var contentId = "tableGrid";
var lock = "class=\"locked\"";
var tableStart = "<table  cellspacing=\"0\" align='center'>\n" +
    "    <tr style='background-color: rgb(50,152,120);'>\n" +
    "      <th class='locked'>姓名</th>\n" +
    "      <th>年龄</th>\n" +
    "      <th>性别</th>\n" +
    "      <th>籍贯1</th>\n" +
    "      <th>籍贯2</th>\n" +
    "      <th>籍贯3</th>\n" +
    "      <th>籍贯4</th>\n" +
    "      <th>籍贯5</th>\n" +
    "    </tr>";
var trStr = "<tr>\n" +
    "      <td class='locked'>张三</td>\n" +
    "      <td>21</td>\n" +
    "      <td>男</td>\n" +
    "      <td>汉族</td>\n" +
    "      <td>汉族</td>\n" +
    "      <td>汉族</td>\n" +
    "      <td>汉族</td>\n" +
    "      <td>汉族</td>\n" +
    "    </tr>";
var tableClose = " </table>";
//原来的
var tableStart2 = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"table2\">\n" +
    "  <tbody>\n" +
    "  <tr class=\"table-header\">\n" +
    "    <th class=\"locked\" field=\"No\">序号</th>\n" +
    "    <th class=\"locked\" field=\"a1\"><span class=\"rankbg\">项目编号<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"a2\"><span style=\"width:250px;\" class=\"rankbg\">项目名称<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"a11\"><span style=\"width:80px;\" class=\"rankbg\">是否可抵扣<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"a3\"><span style=\"width:110px;\" class=\"rankbg\">项目负责人<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"a4\"><span style=\"width:100px;\" class=\"rankbg\">预算类型<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"a5\"><span class=\"rankbg\">项目类型<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"a6\"><span class=\"rankbg\">预算责任部门<span class=\"rank\"><b class=\"rank_up\"></b><b class=\"rank_down\"></b></span></span>\n" +
    "    </th>\n" +
    "    <th field=\"a7\"><span class=\"rankbg\">项目发起部门<span class=\"rank\"><b class=\"rank_up\"></b><b class=\"rank_down\"></b></span></span>\n" +
    "    </th>\n" +
    "    <th field=\"a8\"><span class=\"rankbg\">项目总额<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"a12\"><span class=\"rankbg\">增值税预算<span class=\"rank\"><b class=\"rank_up\"></b><b class=\"rank_down\"></b></span></span>\n" +
    "    </th>\n" +
    "    <th field=\"a13\"><span class=\"rankbg\">不含税预算<span class=\"rank\"><b class=\"rank_up\"></b><b class=\"rank_down\"></b></span></span>\n" +
    "    </th>\n" +
    "    <th field=\"a9\"><span class=\"rankbg\" style=\"width:110px;\">项目起止时间<span class=\"rank\"><b class=\"rank_up\"></b><b\n" +
    "      class=\"rank_down\"></b></span></span></th>\n" +
    "    <th field=\"cz\">操作</th>\n" +
    "    <th style=\"display: none\" field=\"initData\">初始化数据</th>\n" +
    "  </tr>";
var trStr2 = "<tr class=\"table-row\" style=\"background-color: rgb(255, 255, 255);\">\n" +
    "    <td class=\"locked\" style=\"border-top:1px solid rgb(208, 222, 233);\">2</td>\n" +
    "    <td class=\"locked\" style=\"border-top:1px solid rgb(208, 222, 233);\">PJM180625005</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">差旅费223332</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">是</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">系统管理</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">项目预算</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">成本项目</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">工会</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">数据业务中心</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">1230</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">130</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">1000</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\">2018-06至2018-12</td>\n" +
    "    <td style=\"border-top:1px solid rgb(208, 222, 233);\"><input type=\"hidden\" name=\"itemHeaderId\" value=\"10154\"><input\n" +
    "      type=\"hidden\" name=\"dutyDeptId\" value=\"10243\"><input type=\"hidden\" value=\"工会\"><a href=\"javascript:void(0);\"\n" +
    "                                                                                       onclick=\"ajustCheck(this);\">申报</a>\n" +
    "    </td>\n" +
    "    <td style=\"display: none\">undefined</td>\n" +
    "  </tr>";
var tableClose2 = "</tbody>\n" +
    "</table>";
var isTest = false;
if (isTest){
    window.onload = function () {
        //初始化数据
        var contentStr = tableStart2;
        for (var i = 0; i < 10; i++) {
            contentStr += trStr2;
        }
        contentStr += tableClose2;
        var el = document.getElementById(contentId);
        el.innerHTML = contentStr;
        //固定表格
        // fixTable(contentId, "locked");
        fixTable("tableGrid", "locked");
    }
}
function fixTable(contentId, lockStr) {
    var el = document.getElementById(contentId);
    el = el.childNodes[0];
    var top = 0;
    var left = 0;
    el.onscroll = function (e) {
        var ths = el.getElementsByTagName("th");
        var tempTop = el.scrollTop; //得到移动时距离顶部的距离
        var tempLeft = el.scrollLeft; //得到移动时距离左边的距离
        if (top != tempTop) { //有效上下移动
            top = tempTop; //记录上次移动
            for (var i = 0; i < ths.length; i++) { //遍历所有的th
                ths[i].style.top = tempTop + "px"; //强制将th的顶端距离设置为当前的移动的顶端距离
            }
        }
        if (left != tempLeft) {//有效左右移动
            left = tempLeft; //记录上次左右移动量
            var eleLocks = document.getElementsByClassName(lockStr);
            if (eleLocks) {
                for (var i = 0; i < eleLocks.length; i++) {
                    eleLocks[i].style.left = tempLeft + "px"; //强制将th的左端距离设置为当前的移动的左端距离
                }
            }
        }
    }
}

fixTableComponent.css

/*固定表格中某些需要固定的控件组件的css文件*/
#tableGrid td, #tableGrid th {
  white-space: nowrap;
  text-align: center;
}

#tableGrid th {
  position: relative;
  z-index: 1;
}

#tableGrid th.locked {
  z-index: 2;
  /*background-color: white;*/
}

#tableGrid td.locked {
  position: relative;
  left: 0px;
  background-color: white;
}

猜你喜欢

转载自blog.csdn.net/qq_35559756/article/details/80919897
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
周排行
ORACLE 跟踪文件详细解释
20190924-LeetCode解数独题目分享
分治法实例-找下标，下标与对应值相等
安全测试学习笔记
JavaScript笔记：原型和原型链
在Linux中检查可用内存的5种方法
BUAA_OO_JML
mongodb创建用户、备份、恢复等
生活20190602
使用MoveIt!配置软件包在RViz中进行机器人运动规划
每日归档
更多
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022