使用jQuery来锁定HTML表格中的首行和首列

初到公司实习，师傅给了个任务，要求写一个能锁定表格首行和首列的JS文件，类似于Excel那种的。琢磨了一下，记录一下自己学习的过程，有什么需要改进的地方，也希望看的朋友能够指点指点

function roll(table){/* 获取上下滚动的偏移量 */var upOrDown = table.offset().top-$(document).scrollTop();/* 获取左右滚动的偏移量 */var rightOrLeft = table.offset().left-$(document).scrollLeft();/* 判断是否进行的左右滚动 */beginColumn(rightOrLeft,table);firstLine(upOrDown,table);
}
/* 首列样式改变 */
function beginColumn(rightOrLeft,table){var trs = table.find("tr").not(table.find("tr").eq(0));console.log(trs);if(rightOrLeft < 0){for(var i = 0;i < trs.length;i++){trs.eq(i).children().eq(0).css({"position":"relative","left":rightOrLeft*(-1)+"px"});}}else{for(var i = 0;i < trs.length;i++){trs.eq(i).children().eq(0).css("position","static");}}
}
/* 首行样式改变 */
function firstLine(upOrDown,table){if(upOrDown < 0){table.find("tr").eq(0).children().css({"position":"relative","top":upOrDown*(-1)+"px"});}else{table.find("tr").eq(0).children().css("position","static");}
}

使用jQuery来锁定HTML表格中的首行和首列相关推荐

用VBA得到EXCEL表格中的行数和列数
用VBA得到EXCEL表格中的行数和列数每种方法中上面的是Excel的行数,下面的是Excel的列数. 方法1: ActiveSheet.UsedRange.Rows.Count ActiveShe ...
(转贴)用VBA得到EXCEL表格中的行数和列数
<script type="text/javascript"></script> <script src="http://pagead2.g ...
php 中如何设置单元格跨行,HTML表格中单元格跨行跨列
HTML表格中单元格跨行跨列对于标准的表格,每一行的单元格数量是一样的.但在实际使用中,经常会遇到跨行跨列的表格,这个时候,每一行的数量就不一样了. 一.定义所谓"跨行",是 ...
安卓视线可锁定首行和首列的表格视图
如上图所示效果,整体视图构成已标记,联动效果通过两个CustomHorizontalScrollView的setOnScrollChangeListener方法绑定实现. 表格里面数据通过动态添加te ...
纯css position:sticky 实现表格首行和首列固定
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个c ...
jQuery无任何标示获取td在表格中的行数和列数
当td没有任何标示时,在jQuery中实现获取其在表格中的行和列: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
【HTML 教程系列第 19 篇】HTML 表格中的行合并与列合并
这是[HTML 教程系列第 19 篇],如果觉得有用的话,欢迎关注专栏. 在使用 Excel 的时候,会经常的用到合并单元格,而在 HTML 的表格中,有时我们也需要将横向的多个单元格或者纵向的多个单 ...
speedoffice（Excel）表格中怎么自动调整行高列宽？
在excel中录入数据时因为默认的单元格行高和列宽都很小,往往会出现输入的多行文字显示到其他单元格位置,下面了解Excel表格中自动调整行高列宽的方法. 打开excel之后选中单元格输入文字,可以看到 ...
uniapp 固定首行和固定列的表格
准备在uniapp应用中新建一个页面: css部分用到了sass,开发工具是HbuilderX的话安装sass插件即可. 效果第一个一个表格是默认样式用作对照,第二个表格是固定了末尾两列和首行的自 ...

使用jQuery来锁定HTML表格中的首行和首列

使用jQuery来锁定HTML表格中的首行和首列相关推荐

最新文章

热门文章