js 固定表头及固定列的js
//给table 外层加一个div然后将divid传入方法,arr是一个数组里面填写需要固定的列数
function fixedCol(arr,divId){
var colArr = arr || [];
colArr.forEach(function(val){
$("#"+divId).scroll(function(){
var left = $("#"+divId).scrollLeft(); // 获取盒子滚动距离
var trs = $("#"+divId+" table tr"); // 获取表格所有的tr
// 获取每一行下面的td或者th,设置相对定位,偏移距离为盒子滚动的距离即 left
trs.each(function(i){
$(this).children().eq(val).css({"position":"relative","top":"0px","left":left,"background":"white"});
});
});
});
}
#spmx{
position: relative;
background: #fff;
z-index: 4;
}
#reyDiv{
z-index: 3;
}
$(document).ready(function(){
fixedCol([0,1,2],"spmx"); });
js 固定表头及固定列的js的更多相关文章
- JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- table 表格固定表头和第一列、内容可滚动
整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- 固定表头/锁定前几列的代码参考[JS篇]
引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活 ...
- Saiku如何固定查询结果table的表头和首列
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
- 固定table的表头同时固定列
table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候 就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class= ...
- H5手机开发锁定表头和首列(惯性滚动)解决方案
前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...
- jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析
以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...
- 关于JS、JQ首行首列固定展示
当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据: 采用函数的方式进行 JQ /** * ...
- js固定表头的实现(转)
原文链接:http://www.th7.cn/web/js/201509/121055.shtml 参考链接:http://www.jb51.net/article/102568.htm 写两个表格, ...
随机推荐
- c# 编译期常量const和运行时常量readonly
注意:const编译期常量是编译的时候就确定的,可以查看IL代码,是写死的.如果另一个程序集引用后,该程序集没有进行编译,则值不会改变. 看效果: 项目中有2个程序集: 其中:常量在这个程序集中定义并 ...
- SQL Server ->> 存储过程sp_describe_first_result_set解析T-SQL语句的结果集结构信息
返回 Transact-SQL 批处理的第一个可能结果集的元数据. 如果批处理没有返回结果,则返回一个空的结果集. 如果数据库引擎无法确定将通过执行静态分析来执行的第一个查询的元数据,则引发错误. E ...
- 使用keychain永久存储数据
使用keychain永久存储数据 https://github.com/soffes/sskeychain keychain当然还是使用开源的好:),keychain是干啥用的?这个,baidu一下你 ...
- 为什么有时候NSData转换成NSString的时候返回nil
为什么有时候NSData转换成NSString的时候返回nil 有时候,NSData明明有值,可是,当转换成NSString的时候,却没有值,现在来进行测试:) -现在提供测试用素材- 源码如下: / ...
- Allure 安装及使用
linux下安装方法 Allure requires Java 8 or higher npm install -g allure-commandline --save-dev (如果npm不能 ...
- idea指定SpringBoot启动.properties文件
比如我的项目下有2个.properties文件,一个是application.properties,一个是application-local.properties,在本地的时候想指定用applicat ...
- Ubuntn系统(虚拟机)忘记密码的解决方法
1.重启ubuntu系统,开机时长按shift按键进入GRUB菜单,选择第二个高级选项,enter键进入.如下图: 2.在高级选择中选择Recovery mode模式,键盘按“e”键进入编辑模式.如下 ...
- $.ajax 在请求没有完成,是可以往下继续执行js代码的
$.ajax({ url:url, data:{}, success:function(arr) { var varHtml='<option value="" checke ...
- php箭头符号
->这个箭头是调用类中的函数 比如 class a { function b() { echo ’a’; } } $a=new a; $a->b(); 输出:a ...
- scala数据库工具类
scala的数据库连接池,基于mysql import java.util.concurrent.ConcurrentHashMap import com.jolbox.bonecp.{ BoneCP ...