js怎么让指定方法先后顺序_jquery固定table表头

js怎么让指定方法先后顺序_jquery固定table表头当时遇见这个问题是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构只能使用JQ,JS,css完成也谢谢给予我支持的同行们固定首行数据:采用函数的方式进行JQ/***

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

   当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们

 

固定首行数据: 采用函数的方式进行  JQ
/**
* 功能:固定表头
* 参数 viewid 表格的id
* scrollid 滚动条所在容器的id
* size 表头的行数(复杂表头可能不止一行)
*/
function scroll(viewid, scrollid, size) {
  // 获取滚动条容器
  var container = document.getElementById(scrollid);
  // 将表格拷贝一份
  var tb2 = document.getElementById(viewid).cloneNode(true);
  // 获取表格的行数
  var len = tb2.rows.length;
  // 将拷贝得到的表格中非表头行删除
  for (var i = tb2.rows.length; i > size; i–) {
    // 每次删除数据行的第一行
    tb2.deleteRow(size);
  }
  // 创建一个div
  var bak = document.createElement(“div”);
  // 将div添加到滚动条容器中
  container.appendChild(bak);
  // 将拷贝得到的表格在删除数据行后添加到创建的div中
  bak.appendChild(tb2);
  // 设置创建的div的position属性为absolute,即绝对定于滚动条容器(滚动条容器的position属性必须为relative)
  bak.style.position = “absolute”;
  // 设置创建的div的背景色与原表头的背景色相同(貌似不是必须)
  bak.style.backgroundColor = “#cfc”;
  // 设置div的display属性为block,即显示div(貌似也不是必须,但如果你不希望总是显示拷贝得来的表头,这个属性还是有用处的)
  bak.style.display = “block”;
  // 设置创建的div的left属性为0,即该div与滚动条容器紧贴
  bak.style.left = 0;
  // 设置div的top属性为0,初期时滚动条位置为0,此属性与left属性协作达到遮盖原表头
  bak.style.top = “0px”;
  bak.style.width = “100%”;
  // 给滚动条容器绑定滚动条滚动事件,在滚动条滚动事件发生时,调整拷贝得来的表头的top值,保持其在可视范围内,且在滚动条容器的顶端
  container.onscroll = function () {
    // 设置div的top值为滚动条距离滚动条容器顶部的距离值
    bak.style.top = this.scrollTop + “px”;
  }
}

  // 在页面加载完成后调用该方法
  window.onload = function () {
    scroll(“recordDetail”, “tableDiv”, 1);
  }

数据格式展示:
<div id=”tableDiv” style=”overflow-x:auto;” class=”wrapper”>
<table id=’recordDetail’ class=”researh” style=”border-collapse: collapse; table-layout: fixed; clear: both; cursor: pointer;”>
  <tr id=”DetailTh” class=”FixedTitleRow” style=”width:100%;”></tr>
  <tr id=”DatailList” style=”width:100%;” ></tr>
</table>

首列固定展示: CSS样式进行
<script type=”text/javascript”>
  $(“#tableDiv”).scroll(function () {//给table外面的div滚动事件绑定一个函数
    var left = $(“#tableDiv”).scrollLeft();//获取滚动的距离
    var trs = $(“#tableDiv table tr”);//获取表格的所有tr
    trs.each(function (i) {//对每一个tr(每一行)进行处理
      //获得每一行下面的所有的td,然后选中下标为0的,即第一列,设置position为相对定位
      //相对于父div左边的距离为滑动的距离,然后设置个背景颜色,覆盖住后面几列数据滑动到第一列下面的情况
      //如果有必要也可以设置一个z-index属性
      $(this).children().eq(0).css({ “position”: “relative”, “top”: “0px”, “left”: left, “background-color”: “white” });
    });
  });

</script>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167770.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • win系统JDK卸载和彻底删除

    win系统JDK卸载和彻底删除▌第一步:进入“控制面板”。▌第二步:进入“卸载程序”。▌第三步:进入到“程序和功能”界面找到jdk的两个程序:①java8update171(64-bit);②javaSEDevelopmentKit8update171(64-bit);分别右键卸载▌第四步:删除注册表编辑器中的文件在“运行”中输入Regedit,进入注册表编辑器,找到HKEY_LOCAL_MACHINE/SOFTWARE/JavaSoft,将JavaSoft文件夹及其子目录全部删除…

  • clion 2021 激活_在线激活

    (clion 2021 激活)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/ide…

  • 使用 MQTTnet 实现 MQTT 通信示例

    使用 MQTTnet 实现 MQTT 通信示例一、什么是MQTT?MQTT(MessageQueuingTelemetryTransport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分。MQTT是基于二进制消息的发布/订阅编程模式的消息协议,如今已经成为OASIS规范,由于规范很简单,非常适合需要低功耗和网络带宽有限的IoT场景。二、MQTTnetMQ…

  • 未连接到互联网代理服务器出现问题或地址有误(代理服务器的ip地址是多少)

    今天遇到一个问题:【校园网】打开电脑其实网络无法连接到安全代理服务器,本地IP地址非法,无法打开本地连接属性既看不到TCP/IP地址框。解决方法:1.重新启动计算机后发现网卡被禁用,重新启用就好了。

  • apache服务器搭建教程_apache本地服务器

    apache服务器搭建教程_apache本地服务器一、下载安装配置服务器1.下载1.百度搜索downlaodapache2.选择windows版本http://httpd.apache.org/download.cgi3.http://httpd.apache.org/docs/current/platform/windows.html#down4.下载下载解压后,目录结构2..配置配置文件位置:Apache24/conf/httpd.conf1.配置根目录(SRVROOT)$…

  • 金税盘、税控盘、税务UKey快速批量抄税清卡的一种方法分享

    金税盘、税控盘、税务UKey快速批量抄税清卡的一种方法分享本文介绍了金税盘,税控盘,税务UKey抄税和清卡的流程,及常见的一键批量抄税,一键批量清卡的技术手段。分享使用组件进行批量抄税和清卡的核心代码。组件接口同时支持发票开具,作废,红冲等功能。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号