table表格锁定任意数量列或行

由于table是由tr、td等进行布局的，所有不能单独的对表格中的某一行或者某一列进行定位或者固定之类的，但是工作中常常会有过长的表格需要处理，下面给大家介绍一种方法，保持原有的表格不变，在表格的上一层copy一个表格出来，对整个表格进行固定！

不多说，看代码！！！
CSS样式如下(当然也可以自己更改)这都是在JS里面要调用的

.LockRow /*固定行的样式*/
{position: relative;top:0;z-index:2;border: 1px solid #bbc8c8;
}
.LockCell /*固定列的样式*/
{position: relative;left:0;z-index:2;border: 1px solid #bbc8c8;
}
.LockCross /*行列交叉处样式*/
{z-index:3;border: 1px solid #bbc8c8;
}
.divBoxing /*外出div样式*/
{clear:both;overflow-x: scroll;position:relative;
}
.tbLock /*设置单元格间隙的样式*/
{border-collapse:collapse;
}
.lockRowCss{background-color: white;
}
.lockRowBg
{background-image:url('/Styles/images/png_back.png');background-position:0 -960px;background-repeat:repeat-x;line-height:24px;border:1px solid #bbc8c8
}
.lockColumnBg {background-color: white;border-right: 1px solid #bbc8c8 !important;border-left:1px solid #bbc8c8 !important;
}

下面是JS代码，直接拷过去就可以用

/*** Created by Blue on 2016/1/2.*/
var n=0;
(function($) {$.extend($.fn, {TableLock: function(options) {var tl = $.extend({table:'lockTable',//table的idlockRow:1,//固定行数lockColumn:1,//固定列数width:'100%',//表格显示宽度（实质是外出div宽度）//height:'100%',//表格显示高度（实质是外出div高度）lockRowCss:'lockRowBg',//锁定行的样式lockColumnCss:'lockColumnBg'//锁定列的样式}, options);var tableId=tl.table;var table=$('#'+tableId);if(table){var box=$("<div class='divBoxing' id='divBoxing'></div>").scroll(function(){//在此处添加事件$('.LockRow').css('top',$(this).attr('scrollTop')+'px');$('.LockCell').css('left',$(this).attr('scrollLeft')+'px');});var Height=table.attr("height");//动态获取内层table的高度，让滚动条始终紧贴table的下部box.css('width',tl.width).css('height',Height);//设置高度和宽度//外层标签只加一次，避免多次执行时出现纵向滚动条叠加if(n==0){table.wrap(box);n=1;}table.addClass('tbLock');if(tl.lockRow>0){var tr;for(var r=0;r<tl.lockRow;r++){//添加行锁定tr=table.find('tr:eq('+r+')').addClass('LockRow').addClass(tl.lockRowCss);//设置交叉单元格样式，除了锁定单元格外还有交叉单元格自身样式for(var c=0;c<tl.lockColumn;c++){if(tr){tr.find('td:eq('+c+')').addClass('LockCell LockCross').addClass(tl.lockRowCss);}}}}if(tl.lockColumn>0){var rowNum=$('#'+tableId+' tr').length;var tr;for(var r=(tl.lockRow);r<rowNum;++r){tr=table.find('tr:eq('+r+')');for(var c=0;c<tl.lockColumn;++c){//添加列锁定tr.find('td:eq('+c+')').addClass('LockCell LockCross').addClass(tl.lockColumnCss);}}}}else{alert('没有找到对应的table元素，请确保table属性正确性！');}}});
})(jQuery);

下面是调用方法，由于我是基于jquery进行封装的，所以调用的时候当然是要引入jquery文件的哈，这里就不多说了

 $.fn.TableLock({table:'表格的ID',lockRow:锁定行数量,lockColumn:锁定的列数量,width:'100%'})

再啰嗦一下，默认滚动条是紧贴着表格的下边的，如果要自己单独设置高度，就在调用的时候加上height，同时在JS文件内部把 //height:’100%’删除
还有 var Height=table.attr("height");也删除
最后一点：box.css('width',tl.width).css('height',Height）里面的Height改为t1.height

table表格锁定任意数量列或行相关推荐

html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间:2020-08-29 09:26:37 来源:脚本之家阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
php搜索表格,table表格内对某列内容进行搜索筛选步骤详解
这次给大家带来table表格内对某列内容进行搜索筛选步骤详解,table表格内对某列内容进行搜索筛选的注意事项有哪些,下面就是实战案例,一起来看一下. 往往有些时候,我们把数据从数据库读取出来,显示到 ...
表格锁定头和列中间内容展示
表格锁定头和列中间内容展示 jQuery前端table插件,表格顶部头和左右两边列锁定,通过上下和左右滚动展示表格内容,支持内容修改功能.无法兼容所有浏览器,在IE8(H5的效果无效).需要layui ...
html表格新插入一列,VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据来的 ...
excel表格内数据为何无法计算机,电脑EXCEL表格怎么让隐藏列（行）中的数据不被复制...
电脑EXCEL表格怎么让隐藏列(行)中的数据不被复制我们即便在excel中隐藏了列(行),依旧可以显示出来并被复制.今天小编就告诉大家电脑EXCEL表格怎么让隐藏列(行)中的数据不被复制. 具体如下 ...
vue element ui合并表格（合并某列的行数据）
需求:按需合并某些列的数据自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
table表格固定前几列，其余的滚动
我查了好多资料,只找到一个demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""h ...
BootStrap自适应Table表格固定左边第一列
有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览.这个table的左侧第一列是要固定的.所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧.网上查了下方法, ...

table表格锁定任意数量列或行

table表格锁定任意数量列或行相关推荐

最新文章

热门文章