//给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. 重要BLOG

    Cloud http://www.cnblogs.com/CloudMan6/tag/OpenStack/ 算法基础 http://www.cnblogs.com/ECJTUACM-873284962 ...

  2. Android获取SD卡路径及SDCard内存的方法

    这篇文章主要介绍了Android获取SD卡路径及SDCard内存的方法,较为详细的分析了Android针对SD卡操作所涉及的类及其具体函数功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了A ...

  3. 180415_判断闰年的思路及三种 java 实现

    世纪年:能整除 100 的年份 普通年:不能整除 100 的年份 闰年:一年有 366 天,二月有 29 天 平年:一年有 365 天,二月有 28 天 对于世纪年:能整除 400 为闰年,否则为平年 ...

  4. Android app启动是出现白屏或者黑屏如何解决?

    1.为什么 APP 启动时会出现白屏或者黑屏? 当打开一个 Activity 时,如果这个 Activity 所属的应用还没有在运行,系统会为这个 Activity 所属的应用创建一个进程,但进程的创 ...

  5. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  6. 一、vue:如何新建一个vue项目

    比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...

  7. 7.log4j2的使用

    一.简介 log4j2相对于log4j 1.x有了脱胎换骨的变化,其官网宣称的优势有多线程下10几倍于log4j 1.x和logback的高吞吐量.可配置的审计型日志.基于插件架构的各种灵活配置等.如 ...

  8. NodeJS做中转服务器,转发接口

    搬家后的博客地址:http://www.cnblogs.com/shihaibin821/p/7683752.html

  9. linux smem 查看各进程使用memory情况

    SMEM(8) SMEM(8) NAME smem - Report memory usage with shared memory divided proportionally. SYNOPSIS ...

  10. 使用xtrabackup不停服务做从库

    一.安装xtrabackup 1.YUM安装,下载percona源: yum install http://www.percona.com/downloads/percona-release/redh ...