table表格锁定任意数量列或行
来源:互联网 发布:屏幕截图软件下载 编辑:程序博客网 时间:2024/06/04 18:16
由于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的id lockRow: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
0 0
- table表格锁定任意数量列或行
- Table 锁定列,锁定行
- JS实现table 列锁定
- jquery实现表格列锁定
- javascript删除table的行或列
- javascript删除table的行或列
- JQUERY冻结table行或列js
- 点击表格获取表格行或列索引
- 点击表格获取表格行或列索引
- 点击表格获取表格行或列索引
- HTML中表格固定列锁定
- table拖动表格列宽度
- js-表格(table)添加列、删除列
- jQuery 选择表格(table)里的行和列
- jQuery 选择表格(table)里的行和列
- html中表格table冻结行和列
- JS获取table表格任意单元格值
- JS获取table表格任意单元格值
- CF Good Bye 2015 F. New Year and Cleaning(思维)
- Android-Universal-Image-Loader是一个开源的UI组件程序
- 自定义PopupWindow实现Spinner
- Android 开发中,有哪些坑需要注意?
- 挑战面试编程:查找数组中第k大的数
- table表格锁定任意数量列或行
- Azure Storm入门(二)—— 事务处理
- eclipse 中设置content assist 如何设置空格不上屏
- GSM模块--SIM900A短信功能
- 将数据库中的用户名和密码显示到JSP页面
- mysql------常用命令
- 菜鸟学python(2) 常见运算符
- Cocos2D瓦块地图高清屏(retina)显示比例问题的解决
- 【Linux学习】epoll详解