TableLock插件
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TableLock插件</title>
<link rel="stylesheet" href="TableLock.css">
<script src="jquery-1.12.4.min.js"></script>
<script src="TableLock.js"></script>
<script>
$(function(){
$.fn.TableLock({
table:"lockTable",
lockRow:4,
lockColumn:4,
width:"50%",
height:"200px"
});
});
</script>
</head>
<body>
<table id="lockTable" width="800" border="0">
<tr>
<td width="100" align="center">第一列</td>
<td width="100" align="center">第二列</td>
<td width="100" align="center">第三列</td>
<td width="100" align="center">第四列</td>
<td width="100" align="center">第五列</td>
<td width="100" align="center">第六列</td>
<td width="100" align="center">第七列</td>
<td width="100" align="center">第八列</td>
<td width="100" align="center">第九列</td>
<td width="100" align="center">第十列</td>
</tr>
<tr>
<td align="center">1-2</td>
<td align="center">2-2</td>
<td align="center">3-2</td>
<td align="center">4-2</td>
<td align="center">5-2</td>
<td align="center">6-2</td>
<td align="center">7-2</td>
<td align="center">8-2</td>
<td align="center">9-2</td>
<td align="center">10-2</td>
</tr>
<tr>
<td align="center">1-3</td>
<td align="center">2-3</td>
<td align="center">3-3</td>
<td align="center">4-3</td>
<td align="center">5-3</td>
<td align="center">6-3</td>
<td align="center">7-3</td>
<td align="center">8-3</td>
<td align="center">9-3</td>
<td align="center">10-3</td>
</tr>
<tr>
<td align="center">1-4</td>
<td align="center">2-4</td>
<td align="center">3-4</td>
<td align="center">4-4</td>
<td align="center">5-4</td>
<td align="center">6-4</td>
<td align="center">7-4</td>
<td align="center">8-4</td>
<td align="center">9-4</td>
<td align="center">10-4</td>
</tr>
<tr>
<td align="center">1-5</td>
<td align="center">2-5</td>
<td align="center">3-5</td>
<td align="center">4-5</td>
<td align="center">5-5</td>
<td align="center">6-5</td>
<td align="center">7-5</td>
<td align="center">8-5</td>
<td align="center">9-5</td>
<td align="center">10-5</td>
</tr>
<tr>
<td align="center">1-6</td>
<td align="center">2-6</td>
<td align="center">3-6</td>
<td align="center">4-6</td>
<td align="center">5-6</td>
<td align="center">6-6</td>
<td align="center">7-6</td>
<td align="center">8-6</td>
<td align="center">9-6</td>
<td align="center">10-6</td>
</tr>
<tr>
<td align="center">1-7</td>
<td align="center">2-7</td>
<td align="center">3-7</td>
<td align="center">4-7</td>
<td align="center">5-7</td>
<td align="center">6-7</td>
<td align="center">7-7</td>
<td align="center">8-7</td>
<td align="center">9-7</td>
<td align="center">10-7</td>
</tr>
<tr>
<td align="center">1-8</td>
<td align="center">2-8</td>
<td align="center">3-8</td>
<td align="center">4-8</td>
<td align="center">5-8</td>
<td align="center">6-8</td>
<td align="center">7-8</td>
<td align="center">8-8</td>
<td align="center">9-8</td>
<td align="center">10-8</td>
</tr>
<tr>
<td align="center">1-9</td>
<td align="center">2-9</td>
<td align="center">3-9</td>
<td align="center">4-9</td>
<td align="center">5-9</td>
<td align="center">6-9</td>
<td align="center">7-9</td>
<td align="center">8-9</td>
<td align="center">9-9</td>
<td align="center">10-9</td>
</tr>
<tr>
<td align="center">1-10</td>
<td align="center">2-10</td>
<td align="center">3-10</td>
<td align="center">4-10</td>
<td align="center">5-10</td>
<td align="center">6-10</td>
<td align="center">7-10</td>
<td align="center">8-10</td>
<td align="center">9-10</td>
<td align="center">10-10</td>
</tr>
<tr>
<td align="center">1-11</td>
<td align="center">2-11</td>
<td align="center">3-11</td>
<td align="center">4-11</td>
<td align="center">5-11</td>
<td align="center">6-11</td>
<td align="center">7-11</td>
<td align="center">8-11</td>
</tr>
<tr>
<td align="center">1-12</td>
<td align="center">2-12</td>
<td align="center">3-12</td>
<td align="center">4-12</td>
<td align="center">5-12</td>
<td align="center">6-12</td>
<td align="center">7-12</td>
<td align="center">8-12</td>
</tr>
<tr>
<td align="center">1-13</td>
<td align="center">2-13</td>
<td align="center">3-13</td>
<td align="center">4-13</td>
<td align="center">5-13</td>
<td align="center">6-13</td>
<td align="center">7-13</td>
<td align="center">8-13</td>
</tr>
<tr>
<td align="center">1-14</td>
<td align="center">2-14</td>
<td align="center">3-14</td>
<td align="center">4-14</td>
<td align="center">5-14</td>
<td align="center">6-14</td>
<td align="center">7-14</td>
<td align="center">8-14</td>
</tr>
<tr>
<td align="center">1-15</td>
<td align="center">2-15</td>
<td align="center">3-15</td>
<td align="center">4-15</td>
<td align="center">5-15</td>
<td align="center">6-15</td>
<td align="center">7-15</td>
<td align="center">8-15</td>
</tr>
</table>
</body>
</html>
css部分
*{margin:0;padding:0}
.LockRow{position:relative;z-index: 2;top:0;}
.LockCell{position:relative;left:0;z-index:0}
.LockCross{z-index:3;}
.divBoxing{clear:both;overflow:scroll;position:relative;border:1px solid black;}
.tbLock{border-collapse:collapse;}
.lockRowBg{background-color:red;}
.lockColumnBg{background-color:orange;}
table{position:relative;}
js部分
(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 id='divBoxing' class='divBoxing'></div>");
box.scroll(function(){
$(".LockRow").css("top",$(this).scrollTop()+"px");
$(".LockCell").css("left",$(this).scrollLeft()+"px");
});
box.css("width",tl.width).css("height",tl.height);
table.wrap(box);
table.addClass("tbLock");
if(tl.lockRow>0){
var td1;
for(var r=0;r<tl.lockRow;r++){
td1=$('tr:eq('+r+') td');
td1.addClass('LockRow').addClass(tl.lockRowCss);
for(var c=0;c<tl.lockColumn;c++){//设置交叉单元格样式，除了锁定单元格外还有交叉单元格自身样式
$('tr:eq('+r+')').find('td:eq('+c+')').addClass('LockCell LockCross').addClass(tl.lockRowCss);
}
}
}
if(tl.lockColumn>0){
var rowNum=$('#'+tableId+' tr').length;
var tr2;
for(var t=(tl.lockRow);t<rowNum;t++){
tr2=table.find('tr:eq('+t+')');
for(var c1=0;c1<tl.lockColumn;c1++){
tr2.find('td:eq('+c1+')').addClass('LockCell').addClass(tl.lockColumnCss);
}
}
}
}else{
alert("没有找到对应得table元素，请确保table属性正确！")
}
}
})
})(jQuery);
