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);
时间： 2024-10-25 02:12:59