jquery实现表格列冻结

 $(function(){
//初始化表格的位置
var trs=$("#scrollLock table tr");//获取表格的所有tr
       var left=$("#scrollLock").scrollLeft();//获取滚动的距离
// var tdwidth=document.getElementById("dataList").rows[0].cells[35].offsetWidth;
       var tdwidth=$("#dataList").find("tr").eq(0).find("td").eq(35).width();
       var dw=$("#scrollLock").width();//获取实际显示宽度，既滚动条宽度
       var cw=$("#tbDateDiv").width();//获取长的表格的宽度
       var r=cw-dw-16;//最后一列距离从显示区域到长的表格宽度的距离
       
          trs.each(function(i){//对每一个tr（每一行）进行处理
       //获得每一行下面的所有的td，然后选中下标为0的，即第一列，设置position为相对定位
       //相对于父div左边的距离为滑动的距离，然后设置个背景颜色，覆盖住后面几列数据滑动到第一列下面的情况
       //如果有必要也可以设置一个z-index属性
       $(this).children().eq(32).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
       $(this).children().eq(33).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
       $(this).children().eq(34).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
       $(this).children().eq(35).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
         });
//表格外的div的id是scrollLock，这是右侧四列和左侧一列冻结，表格一共35列，拖动滚动条事件
$("#scrollLock").scroll(function(){//给table外面的div滚动事件绑定一个函数
var left=$("#scrollLock").scrollLeft();//获取滚动的左侧距离
var dw=$("#scrollLock").width();//获取实际显示宽度（短表格），既滚动条宽度
var cw=$("#tbDateDiv").width();//获取长的表格的宽度
var r=cw-dw-left;
//var right=$("#scrollLock").scrollRight();//获取滚动的距离
var trs=$("#scrollLock table tr");//获取表格的所有tr
   trs.each(function(i){//对每一个tr（每一行）进行处理
//获得每一行下面的所有的td，然后选中下标为0的，即第一列，设置position为相对定位
//相对于父div左边的距离为滑动的距离，然后设置个背景颜色，覆盖住后面几列数据滑动到第一列下面的情况
//如果有必要也可以设置一个z-index属性
//alert(w);
if(left==0){
$(this).children().eq(0).css({"position":"relative","top":"0px","left":left,"background-color":"#F8F8F8"});
//16px是竖的滚动条宽度，要减去，不然横向滚动条移动到最后，会覆盖掉竖向滚动条
$(this).children().eq(32).css({"position":"relative","top":"0px","right":r-16,"background-color":"#F8F8F8"});
$(this).children().eq(33).css({"position":"relative","top":"0px","right":r-16,"background-color":"#F8F8F8"});
$(this).children().eq(34).css({"position":"relative","top":"0px","right":r-16,"background-color":"#F8F8F8"});
$(this).children().eq(35).css({"position":"relative","top":"0px","right":r-16,"background-color":"#F8F8F8"});
}else{
$(this).children().eq(0).css({"position":"relative","top":"0px","left":left,"background-color":"#F8F8F8"});
$(this).children().eq(32).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
$(this).children().eq(33).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
$(this).children().eq(34).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
$(this).children().eq(35).css({"position":"relative","top":"0px","right":r,"background-color":"#F8F8F8"});
}
});
});
});