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的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