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)


相关推荐

  • IDEA注释详解_idea自定义注释模板

    IDEA注释详解_idea自定义注释模板目录目录生成类注释生成类注解模板生成方法注释生成方法注解模板最近从eclipse转idea了,第一步当然是配置快捷键,模板等。但是!发生了一件贼蛋疼的事情,竟然一直找不到正确添加方法注释的方法!最后自己摸索到了,在此详细记录,供大家参考。测试版本为ideaformac,可能快捷键不同,但是设置等肯定是相同的12生成类注释打开PreferencesEditor-&gt;Fileand…

  • duilib消息类型[终于解决]

    //定义所有消息类型//////////////////////////////////////////////////////////////////////////#defineDUI_MS

    2021年12月18日
  • 阿里云ECS Ubuntu16.0 安装 uwsgi 失败解决方案

    阿里云ECS Ubuntu16.0 安装 uwsgi 失败解决方案

    2021年11月21日
  • C++中voliate关键字

    C++中voliate关键字voliate变量是随时变化的,用voliate修饰的运算,编译器不进行优化,以免出错。对于一个普通变量,为提高存取速率,编译器会先将变量的值存储在一个寄存器中,以后再取变量值时,就存寄存器中取出。但是用voliate修饰的变量,就说明这个变量会发生意向不到的改变。也就是说,优化器每次在读取该值时,不会假设这个值了,每次都会小心的在读取这个变量的值,而不是在寄存器中取保留的备份。那么,…

  • 充分不必要条件和必要不充分条件的意思_怎么区分充分必要条件

    充分不必要条件和必要不充分条件的意思_怎么区分充分必要条件转载:https://www.zhihu.com/question/30469121充分条件:只要有A,就一定能达成B,A是B的充分条件。充分不必要条件:有A,一定能达到B;就算没有A,也有可

  • Linux quotacheck失败

    Linux quotacheck失败  我找了多少个帖子才发现解决这个问题的啊…最终还是靠FQ找的这位大佬的文章http://www.2daygeek.com/quotacheck-error/#  当我在执行quotacheck-avug的时候出现如下的错误:quotacheck:无法从/dev/sdb1上的文件名猜测其格式,请在命令行中指定一个确切的格式。quotacheck:Ca…

    2022年10月22日

发表回复

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

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