zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

JSjQuery方法 怎么 Table 指定 固定 表头
2023-06-13 09:12:57 时间

大家好,又见面了,我是你们的朋友全栈君。

当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用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 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>

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