引语：做有难度的事情，才是成长最快的时候。前段时间，接了一个公司的稍微大点的项目，急着赶进度，本人又没有独立带过队，因此，把自己给搞懵逼了。总是没有多余的时间来做自己想做的事，而且，经常把工作带入生活，这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 += ‘<td style="height:‘ + maxHeight + ‘px;width:‘ +
$(this).find(‘td:eq(‘ + j + ‘)‘).innerWidth() + ‘px">‘ + $(this).find(‘td:eq(‘ + j + ‘)‘).html() + ‘</td>‘;
}
leftHtml2 += ‘<tr>‘ + tmpHtml + ‘</tr>‘;
}
leftHtml = leftHtml + ‘<tr><td style="height:‘ + maxHeight + ‘px">‘ +
$(this).find(‘td:eq(‘ + option.leftIndex + ‘)‘).html() + ‘</td><tr>‘;
}
});
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，示例如下：
<table id="J_MagicTableTop" class="table table-bordered data-list" style="display:none;"></table>
<table class="table table-bordered data-list" id="J_MagicTable">
<thead>
<tr>
<th style="width:80px;">产品</th>
<th style="width:110px;">任务名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="J_MagicTableLeft" class="table table-bordered data-list magic-table-left" style="display:none;"></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，以上为今天的分享，如果有什么不对的地方，欢迎批评指正。如果你有什么疑问，也可以直接@我，我会尽快回复的！