// JavaScript Document//要操作的表格ID
var TableID='';(function(){$.FixTable=function(options){//设置接收参数及默认值var defaults ={TableID:'',//要设置的TableIDLockRowCount:1,//要锁定的行数LockColumnCount:0,//要锁定的列数IsDragTitleWidth:false//是否拖拽标题列宽
            };//转换接收来的参数值
        $.extend(defaults, options);TableID=defaults.TableID;//得到表格本身var $table=$("#"+defaults.TableID);if($table.length==0){return;}//以下设置拖拽效果//以下设置Table冻结行列//滚动条宽度var scrW = 16;$table.show();//得到表格实际大小var tableW = $table.outerWidth(true);var tableH = $table.outerHeight(true);//如果存在这个Table 框架(上次动态查询产生)if($("#tb_fix_Frame").length!=0){$("#tb_fix_Frame").remove();}//允许显示区域大小(外层Div的大小)
        $table.hide();var outDivW = $table.parent().outerWidth(true);var outDivH = $table.parent().outerHeight(true);$table.show();//拿到表格的HTML代码(必须返回到父类才能得到全部HTML)var tableHtml = $table.parent().html();//判断是否需要固定行列头if(tableW<=outDivW && tableH<=outDivH){return;}//判断需要固定行/列/行列var fixType = 4;    //全固定if(defaults.LockRowCount<0 && defaults.LockColumnCount<0){return;}else if (defaults.LockRowCount>0 && defaults.LockColumnCount<=0){fixType = 1;    //行固定
            }else if(defaults.LockRowCount<=0 && defaults.LockColumnCount>0){fixType = 2;    //列固定
            }//固定单元格的位置(固定的宽度高度)var fixW = 0;var fixH = 0;//得到表格的偏移量 (元素在父元素内的坐标)var tableOffset = $table.offset();//每个块中Div统一名称var pid = 'fixbox_'+$table.attr('id');var div1, div2, div3, div4;if(fixType==4){    //行头列头都需固定//取出指定行列单元格在Table表内的偏移量var tdOffset = $table.find('tr').eq(defaults.LockRowCount).find('td').eq(defaults.LockColumnCount).offset();//相减得到要锁定的高度宽度像素fixW = tdOffset.left - tableOffset.left;fixH = tdOffset.top - tableOffset.top;var tmp='<table id="tb_fix_Frame" style="background: #ededed;" border="0" cellspacing="0" cellpadding="0">';tmp+='<tr>';tmp+='<td>';tmp+='<div id="'+pid+'1"></div>';tmp+='</td>';tmp+='<td style="border-bottom: 1px solid '+splitColor+';">';tmp+='<div id="'+pid+'2"></div>';tmp+='</td>';tmp+='</tr>';tmp+='<tr>';tmp+='<td valign="top">';tmp+='<div id="'+pid+'3"></div>';tmp+='</td>';tmp+='<td>';tmp+='<div id="'+pid+'4"></div>';tmp+='</td>';tmp+='</tr>';tmp+='</table>';$table.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'});});div1 = $('#'+pid+'1');div2 = $('#'+pid+'2');div3 = $('#'+pid+'3');div4 = $('#'+pid+'4');//左上角方块
            div1.html(tableHtml).css({width: fixW, height: fixH});div1.find('table:first').attr('id',$table.attr('id')+1);//右上方块div2.html(tableHtml).css({width: outDivW-fixW-scrW, height: fixH});if(outDivH>=tableH)//如果外层Div高度大于或等于表格高度，则不会出现上下滚动条，右上方块宽度不用减去滚动条
            {div2.html(tableHtml).css({width: outDivW-fixW, height: fixH});}//移动Div内的Tablediv2.find('table:first').css({position: 'relative',left: -fixW}).attr('id',$table.attr('id')+2);//左下方块div3.html(tableHtml).css({width: fixW, height: outDivH-fixH-scrW});div3.find('table:first').css({position: 'relative',top: -fixH}).attr('id',$table.attr('id')+3);//主方块
            div4.append(tableHtml).css({width: outDivW-fixW, height: outDivH-fixH+1,overflow:'auto'});div4.find('table:first').css({position: 'relative',top: -fixH,left:-fixW}).attr('id',$table.attr('id')+4);//设置主Div块与Div2块滚动条左右滚动同步//设置主Div块与Div3块滚动条上下滚动同步div4.scroll(function(){div2.scrollLeft($(this).scrollLeft());div3.scrollTop($(this).scrollTop());});}else if(fixType==1){    //只需固定行头//锁定行号大于等于Table的行数、则锁定高度像素为Table高度if(defaults.LockRowCount>=$table.find('tr').length){fixH=$table.height();}else{//得到行的偏移量var tdOffset= $table.find('tr').eq(defaults.LockRowCount).offset();//相减得到要锁定的高度像素fixH = tdOffset.top - tableOffset.top;}//取消Table外层的Div,为下次动态锁定做准备//$table.unwrap();var tmp='<table id="tb_fix_Frame" style="background: #ededed;" border="0" cellspacing="0" cellpadding="0">';tmp+='<tr>';tmp+='<td>';tmp+='<div id="'+pid+'1"></div>';tmp+='</td>'tmp+='</tr>';tmp+='<tr>';tmp+='<td>';tmp+='<div id="'+pid+'2"></div>';tmp+='</td>';tmp+='</tr>';tmp+='</table>';$table.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'});});div1 = $('#'+pid+'1');div2 = $('#'+pid+'2');//上方方块div1.html(tableHtml).css({width: outDivW-scrW, height: fixH});if(outDivH>=tableH)//如果外层Div高度大于或等于表格高度，则不会出现上下滚动条，上方块宽度不用减去滚动条
            {div1.html(tableHtml).css({width: outDivW, height: fixH});}div1.find('table:first').attr('id',$table.attr('id')+1);//主方块
            div2.append(tableHtml).css({width: outDivW+1, height: outDivH-fixH,overflow: 'auto'});div2.find('table:first').css({position: 'relative',top: -fixH,left:0}).attr('id',$table.attr('id')+2);//设置上下Div块滚动条左右同步div2.scroll(function(){div1.scrollLeft($(this).scrollLeft());});        }else if(fixType==2){    //只需固定列头//锁定列号大于等于Table的列数、则锁定宽度像素为Table宽度if(defaults.LockColumnCount>=$table.find('tr').first().find('td').length){fixW=$table.width();}    else{//得到TD在表格内的偏移量var tdOffset = $table.find('tr').first().find('td').eq(defaults.LockColumnCount).offset();//相减得到要锁定的宽度像素fixW = tdOffset.left - tableOffset.left;}//取消Table外层的Div,为下次动态锁定做准备//$table.unwrap();var tmp='<table id="tb_fix_Frame" style="background: #ededed;" border="0" cellspacing="0" cellpadding="0">';tmp+='<tr>';tmp+='<td valign="top">';tmp+='<div id="'+pid+'1"></div>';tmp+='</td>';tmp+='<td>';tmp+='<div id="'+pid+'2"></div>';tmp+='</td>';tmp+='</tr>';tmp+='</table>';$table.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'});});div1 = $('#'+pid+'1');div2 = $('#'+pid+'2');//左方方块div1.html(tableHtml).css({width: fixW, height: outDivH-scrW});div1.find('table:first').attr('id',$table.attr('id')+1);//主方块
            div2.append(tableHtml).css({width: outDivW-fixW, height: outDivH+1,overflow: 'auto'});div2.find('table:first').css({position: 'relative',top: 0,left:-fixW}).attr('id',$table.attr('id')+2);//设置左右Div块滚动条上下滚动同步div2.scroll(function(){div1.scrollTop($(this).scrollTop());});    }}$.DragTitleWidth=function(options){var defaults={TableID:''//要设置的TableID
            }//转换接收来的参数值
        $.extend(defaults, options);//得到表格本身var $table=$("#"+defaults.TableID);if($table.length==0){return;}TableID=defaults.TableID;//在每个TD内容内添加Span层var dragSpan='<div class="resizeDivClass" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);">|</div>';var $td=$table.find('tr').first().find('td');$td.each(function(index,object){$(object).html($(object).html()+dragSpan);});}
})(jQuery);function MouseDownToResize(obj) {var theObjTable = document.getElementById(TableID);setTableLayoutToFixed();obj.mouseDownX = event.clientX;obj.pareneTdW = obj.parentElement.offsetWidth;obj.pareneTableW = theObjTable.offsetWidth;obj.setCapture();
}
function MouseMoveToResize(obj) {if (!obj.mouseDownX) return false;var newWidth = obj.pareneTdW * 1 + event.clientX * 1 - obj.mouseDownX;if (newWidth > 10) {var theObjTable = document.getElementById(TableID);obj.parentElement.style.width = newWidth;theObjTable.style.width = obj.pareneTdW * 1 + event.clientX * 1 - obj.mouseDownX;}
}
function MouseUpToResize(obj) {obj.releaseCapture();obj.mouseDownX = 0;
}
function setTableLayoutToFixed() {var theObjTable = document.getElementById(TableID);    if (theObjTable.style.tableLayout == 'fixed') return;var headerTr = theObjTable.rows[0];for (var i = 0; i < headerTr.cells.length; i++) {headerTr.cells[i].styleOffsetWidth = headerTr.cells[i].offsetWidth;headerTr.cells[i].style.width = headerTr.cells[i].styleOffsetWidth;}theObjTable.style.tableLayout = 'fixed';var $table=$("#"+TableID);if($table.css('position')=='fixed') return;var $td=$table.find('tr').first().find('td');for(var i=0;i<$td.length;i++){//$td.css({'width':$td.outerWidth(true)});
    }
} 

.resizeDivClass
{text-align: right;width: 2px;height: 100%;margin-left:auto;margin-right:0px;border: 0px;float: right;cursor: e-resize;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../Scripts/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/FixDragTable/autoTable.css"/>
<script type="text/javascript" src="../Scripts/FixDragTable/jquery.FixTable.js"></script>
<script type="text/javascript" defer="defer">$(document).ready(function(){//调用拖拽
        $.DragTitleWidth({TableID:'tdDrag'})//锁定首行首列
        $.FixTable({TableID:'tdTest'});})function Add(){var html='';for(var i=0;i<50;i++){html+='<tr>';html+='      <td>我是内容</td>';html+='      <td>我是内容</td>';html+='      <td>我是内容</td>';html+='      <td>我是内容</td>';html+='      <td>我是内容</td>';html+='</tr>';}$(html).appendTo("#tdTest");$.FixTable({TableID:'tdTest'});}
</script>
<style type="text/css">
.myTable td {border:#00F solid 1px;
}
</style>
</head><body>
<input type="button" onclick="Add()" value="点击添加" />
<!--Div溢出部分设置为隐藏-->
<div id="divA" style="width:300px; height:300px; border:#F00 solid 1px; overflow:hidden"><table class="myTable" id="tdTest" style="border-collapse:collapse; width:600px;" cellspacing="0"><tr bgcolor="#99FFFF"><td>列A</td><td>列B</td><td>列C</td><td>列D</td><td>列E</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr></table>
</div><table class="myTable" id="tdDrag" style="border-collapse:collapse; width:600px;" cellspacing="0"><tr bgcolor="#99FFFF"><td>列A</td><td>列B</td><td>列C</td><td>列D</td><td>列E</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr><tr><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td><td>我是内容</td></tr></table>
</body>
</html>