好用的jQuery插件: 固定表格标题行或列头

因为网上没找到合适的方案, 于是昨晚写了个插件,
用来固定指定表格的标题行和列头, 自己测试未发现问题.欢迎交流, 禁止不文明语言.
/****************************************************************jQuery 插件.功能: 固定表格标题行或列头Version: 1.0
Author: liuyar
Date: 2010-03-12调用方法:
$('#myTable').fixTable(
pRow, //可滚动区域第一行的行号
pCol, //可滚动区域第一列的列号
splitColor, //(可选)固定区域与滚动区域的分隔线颜色
);
****************************************************************/jQuery.fn.extend({ fixTable: function(pRow, pCol, splitColor){
//滚动条宽度
var scrW = 16; //设置分隔线颜色
if(!splitColor){
splitColor = '#333';
} //得到表格本身
var t = $(this);
var pid = 'fixbox_'+t.attr('id');

t.show(); //得到表格实际大小
var tw = t.outerWidth(true);
var th = t.outerHeight(true); //在外部包一个DIV,用来获取允许显示区域大小
t.wrap("<div id='"+pid+"' ></div>");
var p = $('#'+pid);
p.css({
width: '100%',
height: '100%',
border: '0px',
margin: '0 0 0 0',
padding: '0 0 0 0'
}); //允许显示区域大小
t.hide();
var cw = p.outerWidth(true);
var ch = p.outerHeight(true);
t.show();

//拿到表格的HTML代码
var thtml = p.html(); //判断是否需要固定行列头
if(tw<=cw && th<=ch){
return;
}
//判断需要固定行/列/行列
var fixType = 4; //全固定
if(tw<=cw-scrW){ //宽度够, 高度不够
fixType = 1; //行固定
cw = tw+scrW;
}else if(th<=ch-scrW){ //高度够, 宽度不够
fixType = 2; //列固定
ch = th+scrW;
}
//固定单元格的位置
var w1 = 0;
var h1 = 0; var post = t.offset(); var p1, p2, p3, p4;
if(fixType==4){ //行头列头都需固定
//取出指定行列单元格左上角的位置,单位px
var pos = t.find('tr').eq(pRow).find('td').eq(pCol).offset();

w1 = pos.left - post.left;
h1 = pos.top - post.top; var tmp='<table style="background: #ECE9D8;" ';
tmp+='border="0" cellspacing="0" cellpadding="0">';
tmp+='<tr><td style="border-right: 1px solid '+splitColor+
';border-bottom: 1px solid '+splitColor+'">';
tmp+='<div id="'+pid+'1"></div></td>';
tmp+='<td style="border-bottom: 1px solid '+splitColor+
';"><div id="'+pid+'2"></div></td></tr>';
tmp+='<tr><td valign="top" style="border-right: 1px solid '+
splitColor+';"><div id="'+pid+'3"></div></td>';
tmp+='<td><div id="'+pid+'4"></div></td></tr>';
tmp+='</table>'; p.before(tmp);

$('div[id^='+pid+']').each(function(){
$(this).css({
background: 'white',
overflow: 'hidden',
margin: '0 0 0 0',
padding: '0 0 0 0',
border: '0'
});
});
p1 = $('#'+pid+'1');
p2 = $('#'+pid+'2');
p3 = $('#'+pid+'3');
p4 = $('#'+pid+'4');

//左上角方块
p1.html(thtml).css({width: w1-1, height: h1-1});
p1.find('table:first').attr('id',undefined); //右上方块
p2.html(thtml).css({width: cw-w1-scrW, height: h1-1});
p2.find('table:first').css({
position: 'relative',
left: -w1
}).attr('id',undefined); //左下方块
p3.html(thtml).css({width: w1-1, height: ch-h1-scrW});
p3.find('table:first').css({
position: 'relative',
top: -h1
}).attr('id',undefined); //主方块
p4.append(p).css({
width: cw-w1, 
height: ch-h1,
overflow: 'auto'
}); t.css({
position: 'relative',
top: -h1,
left: -w1
}); p.css({width: tw-w1, height: th-h1, overflow: 'hidden'});

p4.scroll(function(){
p2.scrollLeft($(this).scrollLeft());
p3.scrollTop($(this).scrollTop());
});
}else if(fixType==1){ //只需固定行头
var pos = t.find('tr').eq(pRow).find('td').first().offset();
h1 = pos.top - post.top; var tmp='<table style="background: #ECE9D8;" ';
tmp+='border="0" cellspacing="0" cellpadding="0">';
tmp+='<tr><td style="border-bottom: 1px solid '+splitColor+'">';
tmp+='<div id="'+pid+'1"></div></td></tr>';
tmp+='<tr><td><div id="'+pid+'2"></div></td></tr>';
tmp+='</table>'; p.before(tmp);

$('div[id^='+pid+']').each(function(){
$(this).css({
background: 'white',
overflow: 'hidden',
margin: '0 0 0 0',
padding: '0 0 0 0',
border: '0'
});
});
p1 = $('#'+pid+'1');
p2 = $('#'+pid+'2');
//上方方块
p1.html(thtml).css({width: tw, height: h1-1});
p1.find('table:first').attr('id',undefined); //主方块
p2.append(p).css({
width: cw+1, 
height: ch-h1,
overflow: 'auto'
}); t.css({
position: 'relative',
top: -h1,
left: 0
}); p.css({width: tw, height: th-h1, overflow: 'hidden'});
}else if(fixType==2){ //只需固定列头
var pos = t.find('tr').first().find('td').eq(pCol).offset();
w1 = pos.left - post.left; var tmp='<table style="background: #ECE9D8;" ';
tmp+='border="0" cellspacing="0" cellpadding="0">';
tmp+='<tr><td valign="top" style="border-right: 1px solid '+splitColor+'">';
tmp+='<div id="'+pid+'1"></div></td>';
tmp+='<td><div id="'+pid+'2"></div></td></tr>';
tmp+='</table>'; p.before(tmp);

$('div[id^='+pid+']').each(function(){
$(this).css({
background: 'white',
overflow: 'hidden',
margin: '0 0 0 0',
padding: '0 0 0 0',
border: '0'
});
});
p1 = $('#'+pid+'1');
p2 = $('#'+pid+'2');
//上方方块
p1.html(thtml).css({width: w1-1, height: th});
p1.find('table:first').attr('id',undefined); //主方块
p2.append(p).css({
width: cw-w1, 
height: ch+1,
overflow: 'auto'
}); t.css({
position: 'relative',
top: 0,
left: -w1
}); p.css({width: tw-w1, height: th, overflow: 'hidden'});
}
}});