关于JS、JQ首行首列固定展示
当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用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>
关于JS、JQ首行首列固定展示的更多相关文章
- excel如何冻结首行或首列及首行首列同时冻结
冻结首行方法: 首先选择首行,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻结首行即可. 效果如下:拖动垂直滚动条 冻结首列方法: 首先选择首列,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻 ...
- 前端基于JQgrid实现自定义列头展示
先上效果图 因为公司项目的需要,并且公司只有我这一个能写js的前端,这个自定义展示jqgrid列选项的需求依然是交由我写,辣么就分享一下我的工作成果. //初始化函数 multiSelectCol ...
- js中文首字母数组排序
js中文首字母数组排序 数组的排序js算法: var Pinyin = (function() { var Pinyin = function(ops) { this.initialize(ops); ...
- CSS样式实现表头和列固定
效果图:第一行和第一列固定 <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- js&jq 发送验证码倒计时
<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function t ...
- easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
随机推荐
- spark开发常见问题之一:java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.
最近在学习研究pyspark机器学习算法,执行代码出现以下异常: 19/06/29 10:08:26 ERROR Shell: Failed to locate the winutils binary ...
- Tomcat常见问题[内存溢出,虚拟目录配置等](一)
一.Tomcat内存溢出的解决方法 内存溢出一般有如下三种常见的原因: OutOfMemoryError: Java heap space OutOfMemoryError: PermGen spac ...
- 记录 nginx和php安装完后的URL重写,访问空白和隐藏index.php文件的操作方法
sudo cd /etc/nginx/; sudo vi fastcgi_params; 1.URL重写 如果你的url参数不是用?xxx传递,而是自定义的,比如用/xx/xx/xx的方式传递,那么在 ...
- 从理论到实践,全方位认识HTTP/2
前言 为了降低加载时间,相信大多数人都做过如下尝试 - Keep-alive: TCP持久连接,增加了TCP连接的复用性,但只有当上一个请求/响应完全 完成后,client才能发送下一个请求 ...
- http-get调用接口简单代码
一.简单便捷的httpget调用接口,并且返回接口数据1.导入相应的jar包: 2.代码如下: HttpGet get=null; try {HttpClient httpClient = new D ...
- 大白话5分钟带你走进人工智能-第30节集成学习之Boosting方式和Adaboost
目录 1.前述: 2.Bosting方式介绍: 3.Adaboost例子: 4.adaboost整体流程: 5.待解决问题: 6.解决第一个问题:如何获得不同的g(x): 6.1 我们看下权重与函数的 ...
- 微信小程序商城 带java后台源码
微信小程序商城(Java版) 演示地址 账号:admin 密码:admin 小程序体验码: 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 myb ...
- 微服务SpringCloud之服务调用与负载均衡
上一篇我们学习了服务的注册与发现,本篇博客是在上一篇的基础上学习服务的调用.上一博客主要创建了Eureka的服务端和一个Client,该Client包含了一个Controller用来提供对外服务供外部 ...
- 5分钟快速部署PESCMS TEAM 团队任务管理系统开发版
所在的公司也经历过小团队的发展,为了高效率,通常都是面对面交流,很多时候事情谈论过后不久就已经淡忘了.而且工作任务不能全局观察,成员之间基本上都要主动去询问,效率反而低下.所以今天就介绍一款中小团队的 ...
- 并发编程-concurrent指南-ReadWriteLock-ReentrantReadWriteLock(可重入读写锁)
几个线程都申请读锁,都能获取: import java.util.concurrent.TimeUnit; import java.util.concurrent.locks.ReentrantRea ...