//给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的更多相关文章

  1. JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. table 表格固定表头和第一列、内容可滚动

    整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  3. 固定表头/锁定前几列的代码参考[JS篇]

    引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活 ...

  4. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  5. 固定table的表头同时固定列

    table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候 就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class= ...

  6. H5手机开发锁定表头和首列(惯性滚动)解决方案

    前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...

  7. jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析

    以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...

  8. 关于JS、JQ首行首列固定展示

    当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据: 采用函数的方式进行  JQ /** * ...

  9. js固定表头的实现(转)

    原文链接:http://www.th7.cn/web/js/201509/121055.shtml 参考链接:http://www.jb51.net/article/102568.htm 写两个表格, ...

随机推荐

  1. LK光流算法的三个假设

    在实际过程中采用 Lucas-Kanade 光流算法跟踪运动物体特征点的时候,一个很明显的特点是LK算法(包括其他光流算法)不能计算"大运动",加上金子塔的方法稍微好点. 这是什么 ...

  2. 继承ViewGroup学习onMeasure()和onLayout()方法

    在继承ViewGroup类时,需要重写两个方法,分别是onMeasure和onLayout. 1,在方法onMeasure中调用setMeasuredDimension方法void android.v ...

  3. sql 日期类型可以使用大于、小于号直接进行比较运算

    select * from emp where hiredate > '1982-1-1';  -- mysqlselect * from emp where hiredate > to_ ...

  4. Pig模式

    Pig中的模式可以是用户显示声明的,也可以是Pig通过用户的使用方式猜测的. Pig对模式的认知在Pig Latin脚本执行的不同阶段可能是不同的.     下面的语句,用户显示声明了模式:3个字段, ...

  5. 64位win10系统中无法开启vmware的VT-X嵌套虚拟化功能的解决方法

    在升级了win10操作系统之后,发现Vmware Workstation在安装64位操作系统虚拟机的或者要使用Intel VT-X/EPT的时候,会一直弹出vt-x被禁用的提示,如下图:       ...

  6. centos 安装glide工具(golang)笔记

    参照官网 https://glide.sh/ 我是在官网(https://glide.sh/)中下载的release包,因为使用命令:curl https://glide.sh/get | sh 无法 ...

  7. leetcode 刷题

    176:第二高的薪水 offset ) as secondhighestsalary; ---去掉第一个,再从第一个开始 177:第N高的薪水 ------相关子查询:子查询中引用了外层查询所引用表的 ...

  8. 将DataRow赋值给model中同名属性

    /// <summary> /// 将DataRow赋值给model中同名属性 /// </summary> /// <typeparam name="T&qu ...

  9. linux在当前目录下根据文件名查找文件

    grep -rl "python" ./ 查找./目录下文件名中包含python的文件 find | grep luoluo将当前目录下(包括子目录)的文件名中含有luoluo的文 ...

  10. java.lang.verifyerror:bad type on orerand stack

    问题: junit测试的时候报这个错:java.lang.verifyerror:bad type on orerand stack 原因:(多种,自行逐个排查) 1.class not find 引 ...