引语：做有难度的事情，才是成长最快的时候。前段时间，接了一个公司的稍微大点的项目，急着赶进度，本人又没有独立带过队，因此，把自己给搞懵逼了。总是没有多余的时间来做自己想做的事，而且，经常把工作带入生活，这TM真是一个糟糕的事情！这两天，终于把项目上上去了，不管结果怎么样，总算是交差了吧。趁着这空档的时间，写点东西。
本篇，就来写写关于固定表头和表列的事儿吧。
相信大家使用excel的时候，肯定都会用到一项冻结的功能，冻结之后，可以让你很方便的查看到各种标题，从而能清楚的查看到当前行的内容。
这个冻结锁定的需求，来源于页面太长，太宽。
那么，对于网页版本的冻结锁定，是不是也有相应的功能呢？去网上搜索插件，基本上又都只是固定表头的，并不能固定前几列。不过幸好，不知道从哪里捡到一部分代码，改了一下内部代码，匆忙将功能实现，进入下一步。下面就跟大家分享一下，锁定表头、前几列的这段代码，也可以认为是个小插件，希望在你需要时，能帮上点忙！（实在没有找到作者是谁，如果你知道，请告知我，我一定加上作者姓名）
独立源码如下：
(function($) { $.fn.magicTable = function(option) { $.fn.magicTable.option = { /* 浮动头部 */ 'magicTop': $('#J_MagicTableTop'), 'magicLeft': $('#J_MagicTableLeft'), /* 可能有隐藏的，所以设定浮动头部的开始索引 */ 'leftIndex': 0, 'leftFlg': false, /* 高度调整 */ "thfix": 0, "thWidth": 0, //左边显示的宽度 "thHeight": 0, "thTop": 0, "thLeft":0, "thLine": 0, "removeTotal": false }; var option = $.extend({}, $.fn.magicTable.option, option); return this.each(function() { $(this).css({'z-index': '9', 'display': '', 'position': 'relative'}); /*复制活动的表格内容*/ var leftHtml = ''; var leftHtml2 = ''; var leftFlg = option.leftFlg; var thWidth = option.thWidth; var thHeight = 0; //th的高度 var thTop = option.thTop; //th距离浏览器顶部的top高度 var thLeft = option.thLeft; //左侧未滚动时的left var removeTotal = option.removeTotal;//除去最后一行的汇总 var flagLeftLength = 0; //左侧显示浮动层时的临界点 //处理浮动的头部 option.magicTop.html($(this).find('thead').clone()).css({ 'width': $(this).width() }); var trLenght = $(this).find('>tbody>tr').length; if(removeTotal) { trLenght -= 1; } $(this).find('tr').each(function(i, item) { var maxHeight = $(this).height(); $(this).find('td').each(function(tdI, tdItem){ var height = $(this).height(); if(height > maxHeight){ maxHeight = height; } }); if (i == option.thLine){ thTop = thTop > 0 ? thTop : $(this).find('th:first').offset().top; thHeight = $(this).height(); //包围th的tr的高度 thLeft = $(this).offset().left; //表格左侧是的left flagLeftLength = $(this).find('th:eq(' + option.leftIndex + ')').offset().left; thWidth = flagLeftLength + $(this).find('th:eq(' + option.leftIndex + ')').outerWidth() - thLeft; } else if (i > option.thLine) { if (leftFlg && (i <= trLenght)){ var tmpHtml = ''; for (var j = 0; j <= option.leftIndex; j++) { tmpHtml += '' + $(this).find('td:eq(' + j + ')').html() + ''; } leftHtml2 += '' + tmpHtml + ''; } leftHtml = leftHtml + '' + $(this).find('td:eq(' + option.leftIndex + ')').html() + ''; } }); if (leftFlg) { leftHtml = leftHtml2; option.magicLeft.html(leftHtml); } /*活动模块*/ function moveSquare(){ if ($(this).scrollTop() >= thTop){ option.magicTop.show().css({ 'z-index': '999', 'position': 'absolute', 'top': $(this).scrollTop() + option.thfix + 'px'}); } else { option.magicTop.css({ 'display': 'none'}); } if ($(this).scrollLeft() >= thLeft) { option.magicLeft.show().css({ 'z-index': '99', 'position': 'absolute', 'top': thTop + thHeight - 1 + 'px', 'left': $(this).scrollLeft() - 1 + 'px', 'width': thWidth + 'px', }); if ($(this).scrollTop() >= thTop){ option.magicLeft.show().css({ 'top': thTop + thHeight - option.thfix - 1 + 'px' }); } } else { option.magicLeft.css({ 'display': 'none'}); } } if (document.all) { window.attachEvent("onscroll", moveSquare); } else { window.addEventListener('scroll', moveSquare, false); } }); }; $.fn.magicTable.setDefaults = function(settings) { $.extend($.fn.magicTable.option, settings); };})(jQuery); 使用方法：
1. 在表格之前，添加一个空的表格头table，在表格之后，添加一个空的表格列table，示例如下：
| 产品 | 任务名称 | 操作 |
|---|
2. 添加js绑定事件
if ($("#J_MagicTable").length > 0) { var blockHeadingHeight = $("#J_BlockHeading").outerHeight(); //用于设置最上面的间隙 $('#J_MagicTable').magicTable({thfix: blockHeadingHeight, leftIndex: 2, leftFlg: true}); } 就这样就可以实现，固定表头和前3列的效果了，还是很不错的。
但是需要注意以下几点：
1. 表结构一定是table > thead > th 这种结构的，表头中一定是有th这个元素的；
2. 表头一定要加上width宽度指示，否则将出现严重错位；
3. 即使是使用了width指示，也会出现错位情况，应该让table>tr>td 设置文字打断， word-break: break-all;
4. 尽量不要使用colspan属性；
原理解析：
其实也很简单，就是利用了一个position: absolute; 起到绝对定位的作用，通过检测当前所处位置，改变他的位置。表头、表列为复制的原表格的属性，不必单独填写；
有待改进的地方：
我本人已经作了部分修改，但是鉴于时间关系，没有细改。待完善： 1. 不用指定表头及表列所在的空位，自行创建即可；2. 获取真实td,th的宽度，不必要全部计算设置；
OK，以上为今天的分享，如果有什么不对的地方，欢迎批评指正。如果你有什么疑问，也可以直接@我，我会尽快回复的！