js怎么让指定方法先后顺序_jquery固定table表头
当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用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
相关文章
- js面试题及答案2020_JS面试题大全
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- JS面试题-js新增基本数据类型BigInt
- Js生成二维码_js在线生成二维码
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法详解数据库
- jQuery表单插件jquery.form.js详解编程语言
- jquery和其他js库起冲突的解决方法详解编程语言
- js jquery 页面加载初始化方法详解编程语言
- JS实现简单的jQuery框架(非常详细)
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- 基于jQuery的js分页代码
- Jquery知识点三jquery表单对象操作
- 基于jquery实现拆分姓名的方法(纯JS版)
- Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- JS加jquery简单实现标签元素的显示或隐藏
- js与jquery获取父元素,删除子元素的两种不同方法
- js/jquery解析json和数组格式的方法详解
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- Jquery+asp.net后台数据传到前台js进行解析的方法
- AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
- 使用jquery动态加载js文件的方法
- jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
- jquery库文件略庞大用纯js替换jquery的方法
- jQuery实现返回顶部功能适合不支持js的浏览器
- jQuery及JS实现循环中暂停的方法
- 原生js实现复制对象、扩展对象类似jquery中的extend()方法
- js/jquery判断浏览器的方法小结
- jquery和js实现对div的隐藏和显示方法